$30 off During Our Annual Pro Sale. View Details »

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
  2. Yutaro Miyazaki (@vwxyutarooo) Yutaro Miyazaki (@vwxyutarooo) 2012~ Jobless 2013~ Freelance

    2016~ Startup 2018~ Mercari
  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
  4. Topics Topics Mercari Web Re-Architecture Apollo Next.js Performance Tuning Conclusion

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

  6. Ancient Huge PHP Code ↓ Modern Architecture

  7. None
  8. None
  9. None
  10. None
  11. Topics Topics Mercari Web Re-Architecture Apollo Next.js Performance Tuning Conclusion

  12. Apollo Apollo

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

  16. None
  17. Next.js Upside Next.js Upside Build System Smart Chunk System Various

    Practices
  18. Next.js Downside Next.js Downside Folder Structure Router We hit the

    Server Side Rendering Performance issue...?
  19. Server Side Rendering Performance?

  20. None
  21. 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.
  22. None
  23. Topics Topics Mercari Web Re-Architecture Apollo Next.js Performance Tuning Conclusion

  24. Performance Tuning Performance Tuning How can we solve this catastrophic

    performance issue
  25. Render method tuning renderToNodeStream for example. Cache

  26. Investigation Investigation

  27. What We Learned is What We Learned is Styled Components

    CategoryLists component Contained regular expression. renderToStaticMarkup and renderToHTML .
  28. Things we've adopted: Prevent HTML from rendering twice. Client Side

    Render Component.
  29. 1. Prevent HTML From Rendered Twice 1. Prevent HTML From

    Rendered Twice
  30. Why Why It's rendered twice by renderToStaticMarkup and renderToHTML ?

  31. None
  32. The case of React Apollo const Dogs = ({ onDogSelected

    }) => ( <Query query={GET_DOGS}> {({ loading, error, data }) => { if (loading) return 'Loading...'; if (error) return `Error! ${error.message}`; return ( <select name="dog" onChange={onDogSelected}> {data.dogs.map(dog => ( <option key={dog.id} value={dog.breed}> {dog.breed} </option> ))} </select> ); }} </Query> );
  33. None
  34. None
  35. For general purpose, React Apollo needs to correct all queries

    from component tree.
  36. Our Solution Our Solution Fragments + React Apollo Fragments +

    Apollo Client
  37. 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) } }
  38. None
  39. const data = (await apolloClientInstance.query(queryOptions)).data;

  40. Measuring Performance (again) Measuring Performance (again)

  41. None
  42. 2. Client Side Render Component 2. Client Side Render Component

  43. None
  44. None
  45. By DynamicComponent: import dynamic from 'next/dynamic'; const DynamicComponentWithNoSSR = dynamic(

    () => import('../components/hello3'), { ssr: false } ); export default const Index = () => <div><DynamicComponentWithNoSSR /></div>;
  46. Measuring Performance (again) Measuring Performance (again)

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

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

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

  50. It doesn't matter which frame work you choose, the performance

    needs to be considered by application.
  51. Don't Guess, Measure.