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.

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 🎉
0
 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

0
 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

0
 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

0
 Advanced issues found
 

Thanks from 🇲🇽!

Made with Slides.com