DiscoverFrontend GreatnessRendering on the Server with Fredrik Höglund
Rendering on the Server with Fredrik Höglund

Rendering on the Server with Fredrik Höglund

Update: 2021-01-28
Share

Description

Fredrik Höglund, the author of two React Server-Side Rendering libraries and a Frontend Lead at PriceRunner joins A-P Koponen on the Frontend Greatness podcast to talk about "rendering on the server".



In this episode:

- What should every frontend developer know about rendering on the server?

- What approaches there are for rendering React apps on the server?

- What are React Server Components?

- How are React Server Components different from Next.js SSR?

- How can you render your SPA on the server?



---



Episode Notes



Social

- Fredrik's Twitter: https://twitter.com/ephemjs

- A-P's Twitter: https://twitter.com/apkoponen



Show Notes

- Next.js :https://nextjs.org/

- Remix: https://remix.run/features

- Gatsby: https://www.gatsbyjs.com/

- RedwoodJS: https://redwoodjs.com/

- Blitz.js: https://blitzjs.com/

- React Server Components: https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html

- Razzle: https://razzlejs.org/

- PriceRunner: https://www.pricerunner.com/

- Prerender.io: https://prerender.io/

- Dynamic Rendering: https://developers.google.com/search/docs/guides/dynamic-rendering



Fredrik's Recommendations

- Great reading on different types of rendering, not React specific: https://developers.google.com/web/updates/2019/02/rendering-on-the-web

- Various resources: https://reactresources.com/topics/server-side-rendering

- Learn Next.js: https://nextjs.org/learn/basics/create-nextjs-app

- Official ReactDOMServer docs: https://reactjs.org/docs/react-dom-server.html

- Avoid XSS vulnerabilities: https://medium.com/node-security/the-most-common-xss-vulnerability-in-react-js-applications-2bdffbcc1fa0



Fredrik's SSR Challenge

Easy

- Create a Razzle app and take a look at server.js.

- Razzle docs: https://razzlejs.org/



Medium

- Add React Query or Redux, fetch data on the server, and hydrate that to the client.

- React Query docs: https://react-query.tanstack.com/guides/ssr

- Redux docs: https://redux.js.org/recipes/server-rendering



Hard

- Using react-router, add multiple pages, and a page-level abstraction for data fetching.

- React Router docs: https://reactrouter.com/web/guides/server-rendering

- How after.js does it: https://github.com/jaredpalmer/after.js/blob/master/packages/after.js/src/loadInitialProps.tsx

Comments 
00:00
00:00
x

0.5x

0.8x

1.0x

1.25x

1.5x

2.0x

3.0x

Sleep Timer

Off

End of Episode

5 Minutes

10 Minutes

15 Minutes

30 Minutes

45 Minutes

60 Minutes

120 Minutes

Rendering on the Server with Fredrik Höglund

Rendering on the Server with Fredrik Höglund

Ari-Pekka Koponen