ReactJS meetup - avril 2019
NextJS Movie Browser
A NextJS implementation of the themoviedb.org website
Goal of this talk
Through feedback on actual project:
- Expose use cases for SSR
- NOT to deep dive in implementation
DEMO 📺
Looks like a regular SPA ...
Client Side Rendering
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="./static/js/main.efc8b8c5.js"></script>
</body>
- Server
- Side
- Rendering
Topics
- Intro to SSR
- CSS-in-JS
- Server-side / Client-side routing
- SEO / Social Media friendly
SSR
DEMO 📺
CSS-in-JS 💅
Why ?
CSS-in-JS 💅
DEMO 📺
CSS-in-JS 💅
- by default, Next.js provides
styled-jsx - possible to use any CSS-in-JS lib, like
styled-components - Only send critical CSS
sheet.collectStyles(<App {...props} />)
Routing 🚘
Server
- By default nothing to setup
- Put your top components in
./pages - matches
/ato./pages/a.tsx
- Put your top components in
- Only load necessary code
- code splitting
- prefetchable
Routing 🚘
Custom Server
Express based
Fully customizable
Constraints:
- Client shouldn't know all the routes ahead of time
Routing 🚘
Custom Server
"Route masking"
Server-side
- Url rewriting
/movie/11➡️/movie?id=11- render some top level component (page) passing the query
Routing 🚘
Custom Server
"Route masking"
Client-side
<Link href="/movie?id=11" as="/movie/11-star-wars" />href:- path inside
./pages - query to provide to top level component
- path inside
as: url to display
Maintains router state via push/replaceState
(or can even be used as an anchor)
Routing 🚘
Custom Server
"Route masking"
// server side
server.get('/movie/:id', (req, res) => {
return app.render(req, res, '/movie', {
id: req.params.id
})
})
// client side
<Link href="/movie?id=11" as="/movie/11" />SEO / Social Media friendly
DEMO 📺
SEO / Social Media friendly
<meta>/<link>tags- Twitter card validator
Miscellaneous
- Type API with TypeScript
- Many examples available
Tooling 🛠
- Jest / Cypress
- Tslint / Prettier
- Travis / Heroku
📝 README