Pre-render, preact-router and Single Page Application

[gbreux]

Hi guys, i'd like to ask a question about the purpose of pre-rendering in a SPA.

To make the SPA working, we need to run a server that redirect all the requests to a index.html right?
So usually we redirect requests to the root index.html file, but then prerendering becomes useless.
So if we prerender all the pages of our app, we would need to configure our server and specify what route/index.html to use for each requests. But then if we have some param url, we need to specify it as well so the server knows which index.html to serve.

This seems a little overcomplicated isn't it? It seems that SSR is an easier solution afterall..

What do you think? Am I missing something? Can it be more simple? Or maybe the only purpose of the prerendering is to build a static website?

[ForsakenHarmony]

You generally don't have to tell the server what to use, just give it a directory and redirect 404 to index.html

[gbreux]

But if I do that, the pre-rendering is useless because the generated files are never served :/

Edit pre-rendering = All the route pre-rendered thanks to prerender-urls.json

[ForsakenHarmony]

They are

Give the server a directory to serve, then it should automatically find the right files to serve

[gbreux]

Ok I see your point but let's say I have this route: /profile/:id - where :id is a prop passed to my component, this is not a page - and then I go to /profile/1234 If i don't tell my server to serve /index.html (or /profile/index.html) it will throw a 404 because there is no 1234 folder/file.

So what do you suggest to do in that case?

[ForsakenHarmony]

redirect to /index.html

[gbreux]

But i don't want to redirect to /index.html but to /profile/index.html since :id is just a param url

[ForsakenHarmony]

Yeah, but setting up custom routes is harder than to just let the client handle it

Redirect was the wrong word, just serve index.html, but keep the path so the client can do it

[lukeed]

You can pre-render whatever & however many routes you want.

Is it always a good idea? Depends, but no not always.

Will the content always be replaced during client rehydration? Yes.

For your case, I would either pick up a server & take an approach similar to preact-cli-ssr, or to write Proxy rules to serve the profile/index.html, which would essentially be an "application shell" but not have your content loaded yet.

[gbreux]

That's super interesting, thanks for all your insights, after more research, i can see a little bit more clearly the use case of each solutions.

Let's do a recap:

• Full static with pre-rendering: can work without a lot of configuration if all your urls has a folder/file associated during the pre-render (so need to be careful if you have param url). If you do have param url, you need to setup your "server" to properly rewrite your url to redirect to a proper file. (Netlify seems to have a process that simplify it a lot and can be the way to go)
• Server Side Rendering: if you need your page to be "filled" with content coming from an API, or if you don't want to proxy all you urls, you may need to use SSR to pre-fill your page for SEO, JavaScriptless and speed purpose.

I guess I can stick with pre-rendering with a good proxy rules for almost all the projects I'm working on :)

I'll close the ticket, don't hesitate to reopen it if you want to go further :)

Cheers