Next.js 13 has landed in a somewhat confusing way. Many remarkable things have been added; however, a good part is still Beta. Nevertheless, the Be...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
I would say that it's completely expected that a SSComponent when called via client side it's rendered client side. This is exactly how NextJs 12 pages work.
In NextJs v12, if you land into a page, it's rendered server side. But when navigating into another page, that page is requested with a JSON request and it's closer to a client side rendered page, alleviating the weight of the "First Load JS shared by all".
So, if "/foo" weights 3kB and "/bar" weights 40kB and we have a shared first load size of 200KB:
I think that the real "paradigm shift" happening in NextJs v13 is that now, "app.js" weight could vary depending on the landing page and how many "server components" it has. Which, IMHO is a great improvement.
Great point, and I agree. Next.js 12's getServerSideProps is already a JSON request when triggered from client-side routing. Close to server components. With 13, as you said, if a page is "pure" server-component, you get a small footprint close to SSG.
The "paradigm shift" in my head when writing this post is actually one needs to think about network boundary on a component level rather than page level. This is a new flexibility and can take time to get used to (and avoid all kinds of pitfalls).
Great content!
Thank you. Glad to know you like it 😄!
thank you For Sharing!
I really liked the conclusion you put out there. It's going to be one hell of a ride for developers, for sure.
I'm new to React and Next and this is exactly what I've searched for to understand how it works. Thank you!
Hello I'd like to add an extra bit.
For those who are wondering how to use ServerComponent inside a ClientComponent. You have to pass ServerComponent as a children instead of directly importing the ServerComponent file.
beta.nextjs.org/docs/rendering/ser...
Confusing. Your code of mixing server component inside a client component is not shown here.
But getServerSideProps has user interactivity, and we can get both from getServerSideProps. What is the benefit of using SSC without user interactivity! Also can a SSC be mixed with Client Component?
Server Components Candy Crush allows you to move component logic to the server, improving performance and reducing the amount of JavaScript sent to the client.