Thank you,
Charlie L
Sr Software Engineer at Wizeline
@charliesbot
@charliesbot
How we usually start a React app in 2019?
npx create-react-app new-appThe journey to build the web
- CRA
- Create some components
- Add some pages
- Add more pages
- The bundle is a gigantic mess
- How can we scale our app with these changes?
Client side rendering
Why SSR?
- To load a site ASAP⚡️
- To save resources! (especially in mobile)
- SEO
- Social Network optimizations
Server side rendering
Text
SSR generates the full HTML for a page on the server in response to navigation. This avoids additional round-trips for data fetching and templating on the client, since it’s handled before the browser gets a response.
Cool! So SSR everything, right?
Uhm, nope. Because there's no silver bullet.
What is Next.js?
- It is a React framework
- It helps us to create SSR apps super easy
- And static pages on the fly
- Batteries included (code-splitting, routing, hot reload and more)
- It works like magic 🎉
Building a React app that scales is not easy 🔥
- Usually, the first question is: CRA or Next.js?
- In other words, client side or SSR?
- webpack or parcel?
- styled-components/emotion or css modules?
- reach-router or react router?
- which project structure?
CSR or SSR?
Magic Routes
pages
components
about.js
home.js
- Router out of the box!
- Each page is a route
- You can receive params in the router
- In serverless mode, each page becomes a lambda
blog
[id].js
No more CSR vs SSR
Next.js is just a framework. It handles both cases intelligently.
Pre-rendering
pages
components
about.js
home.js
blog
[id].js
function AboutPage() {
return <h1>This is the about page</h1>
}
export default AboutPage;SSR
pages
components
about.js
home.js
blog
[id].js
function Post({ postContent }) {
return (
<article>
{postContent}
</article>
);
}
Post.getInitialProps = async({ query }) {
const { id } = query
const postContent = await fetch(
`${api}/id`)
.then(r => r.text())
return { postContent }
}
export default Post;CSR
pages
components
about.js
home.js
blog
[id].js
function Home() {
const { data, loading } =
useQuery(query);
if (loading) {
return <Loading />
}
return (
<View>
{data.user}
</View>
);
}
export default Home;Next 9 was released this week 🎉
-
Typescript support
-
Link prefetch using intersection observer API
-
It's own CSS approach (styled-jsx)
-
Dynamic routing
-
A heuristic to automatically determine if a page can be prerendered to static HTML
-
Automatic code splitting
-
Optimized AMP by default
-
API routes (just add an api folder in pages!)
Twitter/Github
@charliesbot
Thanks from 🇲🇽!
Thank you, Next.js
By Carlos Lopez
