zalando / tailor

A streaming layout service for front-end microservices
http://www.mosaic9.org
MIT License
1.73k stars 141 forks source link

tailorjs nextjs alternative #309

Open joriswijlens opened 5 years ago

joriswijlens commented 5 years ago

Hi,

I like the nextjs framework when it comes to creating server side rendered apps. But it is not very suitable for micro frontends. I think it is build not build for that purpose. Do you know about solutions like nextjs but that play nice with tailor? So a framework with which it is very easy to create apps that serve a couple of fragments, that even when you put two fragments of that app on one tailor template will still work?

Tnx,

Joris Wijlens

rorofino commented 5 years ago

Also interested.

stevoPerisic commented 5 years ago

Why do you say nextjs is not suitable for tailor? Did you run into any problems?

Stevo

Sent from my iPhone

On Aug 9, 2019, at 3:05 AM, Rodrigo Orofino notifications@github.com wrote:

Also interested.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

rorofino commented 5 years ago

I think NextJS needs to handle the whole page render. Do you know if it is possible to use it to generate only the HTML of fragments?

stevoPerisic commented 5 years ago

I have no immediate experience with NextJS, however I do have multiple micro services running through a Tailor JS layout service. If NextJS can serve a response that is a string of HTML than Tailor can handle it.

I don’t think the framework is a blocker for you.

Stevo

Sent from my iPhone

On Aug 9, 2019, at 10:06 AM, Rodrigo Orofino notifications@github.com wrote:

I think NextJS needs to handle the whole page render. Do you know if it is possible to use it to generate only the HTML of fragments?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

rorofino commented 5 years ago

Thanks for the Help @stevoPerisic !

I dont think NextJS can serve a response without the whole HTML page. (doc, head, body, etc...).

stevoPerisic commented 5 years ago

I see, hmmm, I’ll dig into NextJS a bit more... stay tuned

Sent from my iPhone

On Aug 9, 2019, at 1:28 PM, Rodrigo Orofino notifications@github.com wrote:

Thanks for the Help @stevoPerisic !

I dont think NextJS can serve a response without the whole HTML page. (doc, head, body, etc...).

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

stevoPerisic commented 5 years ago

After taking a look over the NextJS docs it seems that you can create and serve server-side rendered components without the HTML page document artifacts (like the head tag). All you have to do is remove this from the service that runs a particular component:

import Document, { Head, Main, NextScript } from 'next/document'

I would create a "layout" service that actually does the Document import to create the base-template and any other sub-templates that your application might need. Then create separate services that return server-side rendered components (fragments) to use in laying out the interior of the templates.

Hope that makes sense, I'm happy to chat more about it.

joriswijlens commented 5 years ago

Hi,

It works quite well until you have two fragments of the same application on the same page. I think this is due to the fact that both fragments load js files with the same name. I created a test with a page that renders two fragments with simple text: fragment 1 and fragment 2. After the second fragment loads they both say fragment 2.

kirankalyan5 commented 4 years ago

Also interested in the outcome and possibilities.

Thanks

KevinMind commented 4 years ago

I've implemented next.js as a template service for node-tailor

you use next.js to generate your pages with server rendered html.

inside these pages you render components which when processed through tailor on server side, are replaced with your fragment applications (which are probably just CRA or simple smaller applications that don't need all the things next.js provides.

Building FRAGMENTS with next.js feels like an anti-pattern, because next.js is designed to be a framework which handles rendering pages.

That's one of the most powerful features of tailor though, it can process anything that can return *

I can provide an example if this is still interesting for anyone.

lsrocha commented 4 years ago

@KevinMind Could you share how did you use node-tailor with Next.js? I'm very interested in developing an application using both.

Did you import tailor into Next.js project or run both standalone? Do you have any project running in production?