Upcoming SSR Support?

[mgreenw]

Hello! @tannerlinsley thanks for building this awesome library! The async routing features are great.

I think this library would go really nicely with Vite for SSG + SSR. Are there plans for SSR support in a future version? The (hidden) docs hint at SSR support, and it seems that some code for SSR (snapshot) is currently commented out. I wasn't able to find any other PRs or issues about this, but please let me know if I missed something. Thanks!

[tannerlinsley]

I would already have support if there was a good story around Route module splitting via SSR that was relatively agnostic. How does Vite handle this? Does it have an async react renderer? Does it detect modules used during SSR and include them in the bundle? 🤷‍♂️ Tanner Linsley

…

On Mar 20, 2022, 7:58 PM -0600, Max Greenwald ***@***.***>, wrote: Hello! @tannerlinsley thanks for building this awesome library! The async routing features are great. I think this library would go really nicely with Vite for SSG + SSR. Are there plans for SSR support in a future version? The (hidden) docs hint at SSR support, and it seems that some code for SSR (snapshot) is currently commented out. I wasn't able to find any other PRs or issues about this, but please let me know if I missed something. Thanks! — Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you were mentioned.Message ID: ***@***.***>

[mgreenw]

Vite's SSR support is very low-level, so it allows you to use the React server rendering methods directly. In terms of an async react renderer, you would use the new renderToPipeableStream React API.

For module splitting, it relies on the good-old dynamic import and Rollup to generate different client chunks. During the build step, it generates a "client entrypoint" chunk that would run first on the client import any code for required pages (in this case it would start the Router and figure out which page needs to be rendered). For SSR, it generates a build manifest, and it is up to the server / SSR step to 1) include the client entrypoint in the output HTML and 2) include preload links to relevant page JS files to avoid the waterfall of the client entrpoint and then the page js.

Here is a really well done example (and here's the github repo) of using Vite with react-location. It even includes a "prerender" step to build static HTML files for each page, though it is currently broken due to the router.updateLocation(location.current) step seemingly not creating / saving a snapshot of the currently location (I could be off here). This example does not show full SSR, but it's pretty close and a great example of using Vite's awesome import.meta.glob feature .

I realize that this isn't very build-tool agnostic, but I think as long as react-location allows for dynamically importing route elements (which it already does), then it's up to the build tooling to figure out the complexities route module splitting and preloading.

[tannerlinsley]

If i were to release some of these utilities under experimental prefixes, would you want to head up the testing and concept development for SSR?

[tannerlinsley]

Here you go :) 38041bd

Let me know how far you get. If you want, you can DM on https://tlinz.com/discord and we can chat there.

[mgreenw]

Thanks, will do!