6 ms·

Please don't make the mistake of differentiating SSR and SSG, even Next slowly moves away from this arguably bad naming. There is only server-rendering, and it

Please don't make the mistake of differentiating SSR and SSG, even Next slowly moves away from this arguably bad naming. There is only server-rendering, and it can happen on request, or be pre-computed at build-time, or everything in between. The SSR/SSG thing is historical, trips most beginners, and may mislead implementation. Otherwise cool initiative, many Next devs are learning Rust too since it's part of the codebase.

eric-burel 4y ago
Making i18n a special case is also something Next is moving away. I18n is just an example of personalization, like multi-tenancy, AB tests for instance. Support personalization and you get all those for free. From the readme it seems a good clone of Next 12, but a very small step behind the current rationales that explain Next 13 design choices. Again still very cool project!
aww_dang 4y ago
I always thought of static sites as prebuilt from templates, whereas traditional SSR sites populate the templates (think jsp or php) on demand. Depending on the framework, the SSR page might already be cached and be effectively static.
- eric-burel 4y ago
  Yes seeing it as a cache, where the cache key is a transformation of the user request (including requests to "static" pages) is a better model that leads to a unified vision of SSR/SSG
  - anonymous_sorry 4y ago
    I get that you can see it that way. If you were going to use server-side rending (SSR) anyway you can claim that static site generation (SSG) is a special case supported by any SSR framework. Or perhaps even that SSR is a generalisation of SSG to support dynamic content. But it feels like a bit of a stretch. The whole point of SSG is to simplify your architecture and tooling by forgoing the ability to dynamically render content on the server. It is a trade-off that won't be suitable for every application, and that's absolutely fine. If you want to argue that SSR tooling can be so simple and cheap that the SSG trade-off isn't worth it, then I'm keen to learn about that. But to elide the distinction between the two seems unhelpful to me.
    - eric-burel 4y ago
      I mean the framework can of course differientiate those use cases clearly, static and dynamic still exist in Next 13 App Router. But making them totally separate is a mistake too. Namely what bothers me is that a few points made in the docs or by users in this comment section show a limited visions of static rendering. It is certainly not limited to generic content that is the same for all users, I've built enough counter-examples to prove it.
      - anonymous_sorry 4y ago
        Why is it a mistake to separate them? If can generate my site as a bunch of static content, upload it to a server, and have it served by nginx or similar, then I don't need to think about the next.js App Router, React, or indeed any custom server-side code. That's what static site generation is for, and it seems rather distinct from what you are talking about. Yes it is limiting, and it won't be appropriate for many use cases. But if you can do it, it makes things simpler, cheaper and more efficient. That's not to say you can't combine SSG tooling with dynamic content too if you need it. But static-only is a perfectly valid choice if you can get away with it.
        eric-burel 4y ago
        Your answer conflates statically rendering a page (server-side prerendering at build-time), and statically rendering a website (exporting in Next.js terminology). You seem to talk about statically rendering the website while my point is more about statically rendering pages or layouts.
- re-thc 4y ago
  Anything that has to go through a server is not effectively static. If you live in Tokyo and connect to a website in Oregon, this effectively static could be ~100ms (served by origin) vs actual static that's ~10ms (served by CDN local PoP). Side note: this is why developers need to care about infrastructure and vice versa. I distinctly dislike the abstract separations as the implementation details always matter.
  - aww_dang 4y ago
    Latency issues for the round trip are a different topic. Static means unchanging. In this context, pre-rendered pages stored in HTML files. CDNs may inject dynamic content into the page or filter the request, but this is a digression.
  - eric-burel 4y ago
    That's also why you can render user specific content statically, you just need to redirect the user to the right page, for instance using an URL rewrite
eric-burel 4y ago
An example from the doc about state: "For instance, you can't generate personalized dashboard pages at build-time, because you don't know yet who your users are" That's an outdated take, it's been proven wrong, otherwise you wouldnt be able to implement static i18n. The extreme case where you have a version of the page for just 1 user is totally doable and can be relevant (say a version of the page just for the admin).
Tehnix 4y ago
IMHO it's a huuuge mistake to try and squash these two very distinctly different things into one word (SSR), and it has added a ton of confusion to many with Next.js's move away from it. - SSR: Dynamic rendering of paths, happening at runtime. - SSG: Static rendering of paths, happening at compile time. A separation makes it much clearer that the core difference here is that SSG can only take you as far as "something generic for everyone" and SSR will be able to render "a page unique for a specific user". Infrastructure-wise there is a world of difference between the two approaches and they are not even close to being related. - SSR: You'll need servers, scaling, load balancing, etc. - SSG: CDN + S3 and you're done EDIT: To add a bit, imagine the following "I'm using SSR.", "Ah, cool, like full SSR or only half SSR?", "Only half, serving static files" - at this point, it's clear that we've now overloaded SSR to be a less useful term to describe what it is, which I personally find quite unfortunate.
- vlovich123 4y ago
  I don’t know. I think a good SSR library + some clever front end frameworks + an edge compute platform where you don’t have to worry about anny scaling and you’re done. I’ve seen some really impressive demos of stuff that is extremely dynamic (ie per request), rendered server side on first use for the immediate portion you need with transparent hydration in the background to download interactivity as needed. Sure it seems more complicated ha CDN + S3, but I think in actuality it’ll be simpler in application. It all works super slick and conceptually there’s actually very little complexity for those applying it (the frameworks take care of the difficult bits). Since this is happening at the edge (in Cloudflare’s case, where I work, within something like 50ms of transit time to 95% of the population), and you’re only doing the initial view, you can get websites that load large pieces of content much more quickly than rendering it client side which is dominated by less powerful devices (ie SSR+transfer time is competitive) with less bandwidth/higher latency if you’re collating responses from different backends. You could even see that extending where they prefetch the raw data you’ll need to render the rest of the page in the background and either prepare a rendering, just bring it closer into the cache as a prefetch, or even push it to your browser proactively. Now of course it’s possible this stuff won’t generalize but I don’t see any obvious obstacles. It feels like within 10 years this could be the dominant way client web apps will be written. I get that we originally used to do that but it’s about taking the best of both worlds (SSR let’s you get super high performance initial loads while dynamic client side handling let’s you handle interactivity better and doing it transparently makes your development process a heck of a lot simpler as you don’t really need to differentiate the code as much (whereas I think you would with SSG+SSR). For SSG you probably don’t need to find general pieces of content and set up a different layer vs changing some caching parameters / doing content based hashing transparently. I think that’s maybe the direction OP was heading with in his remark of the distinction not being helpful.

eric-burel 4y ago

Making i18n a special case is also something Next is moving away. I18n is just an example of personalization, like multi-tenancy, AB tests for instance. Support personalization and you get all those for free. From the readme it seems a good clone of Next 12, but a very small step behind the current rationales that explain Next 13 design choices. Again still very cool project!

aww_dang 4y ago

I always thought of static sites as prebuilt from templates, whereas traditional SSR sites populate the templates (think jsp or php) on demand. Depending on the framework, the SSR page might already be cached and be effectively static.

eric-burel 4y ago
Yes seeing it as a cache, where the cache key is a transformation of the user request (including requests to "static" pages) is a better model that leads to a unified vision of SSR/SSG
- anonymous_sorry 4y ago
  I get that you can see it that way. If you were going to use server-side rending (SSR) anyway you can claim that static site generation (SSG) is a special case supported by any SSR framework. Or perhaps even that SSR is a generalisation of SSG to support dynamic content. But it feels like a bit of a stretch. The whole point of SSG is to simplify your architecture and tooling by forgoing the ability to dynamically render content on the server. It is a trade-off that won't be suitable for every application, and that's absolutely fine. If you want to argue that SSR tooling can be so simple and cheap that the SSG trade-off isn't worth it, then I'm keen to learn about that. But to elide the distinction between the two seems unhelpful to me.
  - eric-burel 4y ago
    I mean the framework can of course differientiate those use cases clearly, static and dynamic still exist in Next 13 App Router. But making them totally separate is a mistake too. Namely what bothers me is that a few points made in the docs or by users in this comment section show a limited visions of static rendering. It is certainly not limited to generic content that is the same for all users, I've built enough counter-examples to prove it.
    - anonymous_sorry 4y ago
      Why is it a mistake to separate them? If can generate my site as a bunch of static content, upload it to a server, and have it served by nginx or similar, then I don't need to think about the next.js App Router, React, or indeed any custom server-side code. That's what static site generation is for, and it seems rather distinct from what you are talking about. Yes it is limiting, and it won't be appropriate for many use cases. But if you can do it, it makes things simpler, cheaper and more efficient. That's not to say you can't combine SSG tooling with dynamic content too if you need it. But static-only is a perfectly valid choice if you can get away with it.
      - eric-burel 4y ago
        Your answer conflates statically rendering a page (server-side prerendering at build-time), and statically rendering a website (exporting in Next.js terminology). You seem to talk about statically rendering the website while my point is more about statically rendering pages or layouts.
re-thc 4y ago
Anything that has to go through a server is not effectively static. If you live in Tokyo and connect to a website in Oregon, this effectively static could be ~100ms (served by origin) vs actual static that's ~10ms (served by CDN local PoP). Side note: this is why developers need to care about infrastructure and vice versa. I distinctly dislike the abstract separations as the implementation details always matter.
- aww_dang 4y ago
  Latency issues for the round trip are a different topic. Static means unchanging. In this context, pre-rendered pages stored in HTML files. CDNs may inject dynamic content into the page or filter the request, but this is a digression.
- eric-burel 4y ago
  That's also why you can render user specific content statically, you just need to redirect the user to the right page, for instance using an URL rewrite

eric-burel 4y ago

An example from the doc about state: "For instance, you can't generate personalized dashboard pages at build-time, because you don't know yet who your users are" That's an outdated take, it's been proven wrong, otherwise you wouldnt be able to implement static i18n. The extreme case where you have a version of the page for just 1 user is totally doable and can be relevant (say a version of the page just for the admin).

Tehnix 4y ago

IMHO it's a huuuge mistake to try and squash these two very distinctly different things into one word (SSR), and it has added a ton of confusion to many with Next.js's move away from it. - SSR: Dynamic rendering of paths, happening at runtime. - SSG: Static rendering of paths, happening at compile time. A separation makes it much clearer that the core difference here is that SSG can only take you as far as "something generic for everyone" and SSR will be able to render "a page unique for a specific user". Infrastructure-wise there is a world of difference between the two approaches and they are not even close to being related. - SSR: You'll need servers, scaling, load balancing, etc. - SSG: CDN + S3 and you're done EDIT: To add a bit, imagine the following "I'm using SSR.", "Ah, cool, like full SSR or only half SSR?", "Only half, serving static files" - at this point, it's clear that we've now overloaded SSR to be a less useful term to describe what it is, which I personally find quite unfortunate.

vlovich123 4y ago
I don’t know. I think a good SSR library + some clever front end frameworks + an edge compute platform where you don’t have to worry about anny scaling and you’re done. I’ve seen some really impressive demos of stuff that is extremely dynamic (ie per request), rendered server side on first use for the immediate portion you need with transparent hydration in the background to download interactivity as needed. Sure it seems more complicated ha CDN + S3, but I think in actuality it’ll be simpler in application. It all works super slick and conceptually there’s actually very little complexity for those applying it (the frameworks take care of the difficult bits). Since this is happening at the edge (in Cloudflare’s case, where I work, within something like 50ms of transit time to 95% of the population), and you’re only doing the initial view, you can get websites that load large pieces of content much more quickly than rendering it client side which is dominated by less powerful devices (ie SSR+transfer time is competitive) with less bandwidth/higher latency if you’re collating responses from different backends. You could even see that extending where they prefetch the raw data you’ll need to render the rest of the page in the background and either prepare a rendering, just bring it closer into the cache as a prefetch, or even push it to your browser proactively. Now of course it’s possible this stuff won’t generalize but I don’t see any obvious obstacles. It feels like within 10 years this could be the dominant way client web apps will be written. I get that we originally used to do that but it’s about taking the best of both worlds (SSR let’s you get super high performance initial loads while dynamic client side handling let’s you handle interactivity better and doing it transparently makes your development process a heck of a lot simpler as you don’t really need to differentiate the code as much (whereas I think you would with SSG+SSR). For SSG you probably don’t need to find general pieces of content and set up a different layer vs changing some caching parameters / doing content based hashing transparently. I think that’s maybe the direction OP was heading with in his remark of the distinction not being helpful.