Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Server Side Rendering Tuning with Next.js

Server Side Rendering Tuning with Next.js

Yutaro Miyazaki

July 03, 2019
Tweet

More Decks by Yutaro Miyazaki

Other Decks in Technology

Transcript

  1. Server Side Rendering Tuning with Next.js
    Server Side Rendering Tuning with Next.js
    Mercari x Merpay Frontend Tech Talk vol.2
    @vwxyuratoooo

    View full-size slide

  2. Yutaro Miyazaki (@vwxyutarooo)
    Yutaro Miyazaki (@vwxyutarooo)
    2012~ Jobless
    2013~ Freelance
    2016~ Startup
    2018~ Mercari

    View full-size slide

  3. My Talk is About...
    My Talk is About...
    Our new architecture of Mercari Web
    The performance issue of
    Server Side Rendering with Next.js

    View full-size slide

  4. Topics
    Topics
    Mercari Web Re-Architecture
    Apollo
    Next.js
    Performance Tuning
    Conclusion

    View full-size slide

  5. What Web Re-Architecture is
    What Web Re-Architecture is

    View full-size slide

  6. Ancient Huge PHP Code

    Modern Architecture

    View full-size slide

  7. Topics
    Topics
    Mercari Web Re-Architecture
    Apollo
    Next.js
    Performance Tuning
    Conclusion

    View full-size slide

  8. Apollo
    Apollo

    View full-size slide

  9. Topics
    Topics
    Mercari Web Re-Architecture
    Apollo
    Next.js
    Performance Tuning
    Conclusion

    View full-size slide

  10. Next.js Upside

    Next.js Upside

    Build System
    Smart Chunk System
    Various Practices

    View full-size slide

  11. Next.js Downside

    Next.js Downside

    Folder Structure
    Router
    We hit the Server Side Rendering Performance issue...?

    View full-size slide

  12. Server Side Rendering Performance?

    View full-size slide

  13. 100 requests per second.
    40 CPU cores were waste.
    It still doesn't reaches to 100 requests per second
    On the production environment
    It's supposed to spend 800 CPU cores.

    View full-size slide

  14. Topics
    Topics
    Mercari Web Re-Architecture
    Apollo
    Next.js
    Performance Tuning
    Conclusion

    View full-size slide

  15. Performance Tuning
    Performance Tuning
    How can we solve this
    catastrophic performance issue

    View full-size slide

  16. Render method tuning
    renderToNodeStream
    for example.
    Cache

    View full-size slide

  17. Investigation
    Investigation

    View full-size slide

  18. What We Learned is
    What We Learned is
    Styled Components

    CategoryLists
    component
    Contained regular expression.
    renderToStaticMarkup
    and
    renderToHTML
    .

    View full-size slide

  19. Things we've adopted:
    Prevent HTML from rendering twice.
    Client Side Render Component.

    View full-size slide

  20. 1. Prevent HTML From Rendered Twice
    1. Prevent HTML From Rendered Twice

    View full-size slide

  21. Why
    Why
    It's rendered twice by
    renderToStaticMarkup
    and
    renderToHTML
    ?

    View full-size slide

  22. The case of React Apollo
    const Dogs = ({ onDogSelected }) => (

    {({ loading, error, data }) => {
    if (loading) return 'Loading...';
    if (error) return `Error! ${error.message}`;
    return (

    {data.dogs.map(dog => (

    {dog.breed}

    ))}

    );
    }}

    );

    View full-size slide

  23. For general purpose,
    React Apollo needs to correct all queries from
    component tree.

    View full-size slide

  24. Our Solution
    Our Solution
    Fragments + React Apollo
    Fragments + Apollo Client

    View full-size slide

  25. Fragments:
    query GetPerson {
    people(id: "7") {
    firstName
    lastName
    avatar(size: LARGE)
    }
    }
    fragment NameParts on Person {
    firstName
    lastName
    }
    query GetPerson {
    people(id: "7") {
    ...NameParts
    avatar(size: LARGE)
    }
    }

    View full-size slide

  26. const data = (await apolloClientInstance.query(queryOptions)).data;

    View full-size slide

  27. Measuring Performance (again)
    Measuring Performance (again)

    View full-size slide

  28. 2. Client Side Render Component
    2. Client Side Render Component

    View full-size slide

  29. By DynamicComponent:
    import dynamic from 'next/dynamic';
    const DynamicComponentWithNoSSR = dynamic(
    () => import('../components/hello3'),
    { ssr: false }
    );
    export default const Index = () => ;

    View full-size slide

  30. Measuring Performance (again)
    Measuring Performance (again)

    View full-size slide

  31. Topics
    Topics
    Mercari Web Re-Architecture
    Apollo
    Next.js
    Performance Tuning
    Conclusion

    View full-size slide

  32. Additionally
    The Latency Duration has Improved
    P50:
    1,000ms
    ->
    600ms

    View full-size slide

  33. Also we saved nearly 1.5 million yen per month.

    View full-size slide

  34. It doesn't matter which frame work you choose,
    the performance needs to be considered by application.

    View full-size slide

  35. Don't Guess, Measure.

    View full-size slide