4

Are there any key differences or benefits to using isomorphic (server side) react, vs using a statically generated react app with for example gatsby?

I understand, both will generate html to send to the browser for the initial page load so they both have SEO optimisation. And both can be used with authenticated routes and non-static content. I know they are not the same thing, but what are the differences and more importantly why would someone use one over the other.

Thanks in advance.

Improve this question

1 Answer 1

Reset to default
4

There are some differences.

  1. As the names suggest, isomorphic rendering requires a backend server; pre-rendering does not require a backend server.
  2. With SSR, the page and metadata will include user-specific data; pre-rendering will not include user-specific data on initial page load.
  3. Pre-rendering requires serving multiple .html files and proxies must be redirected to those files; isomorphic rendering is still an SPA.

Under what conditions would one be favored over another?

Where user-specific data would ideally be severed when page is loaded (Iso) Where content doesn't change much and is not user specific (Pre)

The differences noted are the critical differences. There is variation of techniques within the different approaches.

Aside, Isomorphic rendering combines SSR and CSR. Isomorphic rendering does dynamic routing in the browser. SSR only solutions serve new pages at every new route.

Two good resources:

https://www.toptal.com/front-end/client-side-vs-server-side-pre-rendering

https://jamstack.org

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Dude. Imagine that I made a web with gatsby, on one page I will add a dynamic component, it means on user click it will show a random nice phrase. It with react is easy, also with SSR is easy because React takes over the website on user interact. What about Gatsby? How gatsby handle this interaction?
@roll, I had the same question. I found the answer in the Gatsby docs: 1) The static site HTML gets generated at build time, 2) Even though the HTML is static, there is a bit of JS included that can rebuild a React app client-side from the static HTML ('rehydration'), 3) After this 'rehydration' phase, the React app will run like a normal SPA. You can use it for dynamic client-side behavior like your random phrase, data fetching, authentication, etc.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.