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-app

The 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.

https://developers.google.com/web/updates/2019/02/rendering-on-the-web

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 🎉

Advanced issues found

▲

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

Advanced issues found

▲

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

Advanced issues found

▲

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

https://slides.com/charliesbot/thank-you-next-js/

Advanced issues found

▲

Thanks from 🇲🇽!