Web Developer currently experienced in JavaScript, React, Node.js but interested to learn multiple technologies and not stick to dead ones.
Specialization- Building high performance SPAs.
The most striking difference between Remix and Next is that Remix supports Nested Routes.
In Next.js each route is totally independent so when you transition to a route all previous components get unmounted and the next page's components get mounted.
Suppose you render a sidebar in /dashboard. When you go to /dashboard/admin that sidebar won't exist now. To sidestep this issue you'd make layout components and reuse them in every route. However, since the component gets unmounted during the transition they will lose their internal state. If the sidebar had a search field and the user had entered some text in it, that text will be lost on page transition.
In Remix, since it supports nested routes you can choose which part of the dashboard page remains for /dashboard only and which part remains the same for /dashboard and /dashboard/admin. This is a lot less wasteful IMO.
Another benefit of nested routes is that you can get granular data from your loaders. If a user goes from /dashboard to /dashboard/admin, the data of /dashboard need not sent again.
This is just what I've gathered from reading the newsletter. I expect a lot of innovations on top of nested routes.
Regarding comparison with Blitz- Blitz is a framework built on top of Next.js and it owns even more of your stack. Its aim is to give you Ruby on Rails like developer productivity. It includes doing database queries and other superb stuff out of the box. I expect something like it can be built on top of Remix too.
VP of DevRel RapidAPI ❯ Award-winning Web Developer NodeCLI.com ❯ Google Dev Expert Web tech ❯ 2x GitHub Stars Award ❯ WordPress Core Dev ❯ TEDx Speaker ❯ "awesome example for devs" — Satya Nadella
Location
San Francisco Bay Area
Education
EE-CS Engineer turned Software Developer
Work
VP of DevRel (DX Eng., Content & Community) RapidAPI ❯ Google Dev Expert ❯ GitHub Star ❯ NodeCLI.com
I'm not sure if that's entirety true. Next.js SSR on internal routing would not request a new page/HTML, instead it requests the JSON output of the getServerSideProps of the new page, and then Next.js on the client end, hydrates your new page using that JSON.
Web Developer currently experienced in JavaScript, React, Node.js but interested to learn multiple technologies and not stick to dead ones.
Specialization- Building high performance SPAs.
You're totally right in what you're saying. However, the intention of my comment had nothing to do with requesting new HTML. It might have come across that way. Can you point me to the line which is false in my comment?
VP of DevRel RapidAPI ❯ Award-winning Web Developer NodeCLI.com ❯ Google Dev Expert Web tech ❯ 2x GitHub Stars Award ❯ WordPress Core Dev ❯ TEDx Speaker ❯ "awesome example for devs" — Satya Nadella
Location
San Francisco Bay Area
Education
EE-CS Engineer turned Software Developer
Work
VP of DevRel (DX Eng., Content & Community) RapidAPI ❯ Google Dev Expert ❯ GitHub Star ❯ NodeCLI.com
I'm not trying to point where you're false or not. 😂
I think you believe that the entire page render happens again and again with Next.js which I believe is not true.
SSR DIRECT PAGE REQUEST
When you request this page directly (by entering the page URL in the browser), the page is pre-rendered by the server and sent to the client.
STEP #1: Server pre-renders the page with dynamic data
STEP #2: Client shows the pre-rendered page
SSR CLIENT-SIDE PAGE REQUEST
When you request this page on the client-side page transitions through next/link or next/router (by clicking an internal link on a page)
STEP #1: Next.js sends an API request to the server
STEP #2: Server runs the getServerSideProps
STEP #3: Server returns resulting JSON as a response
STEP #4: Next.js uses this JSON response to render the page
Now mix this with SSG where parts of your page are static. Like you mentioned the sidebar. That can be completely static with no JavaScript at all. Hence creating a hybrid SSR, CSR, SSG page with Next.js can improve perf a lot here.
Web Developer currently experienced in JavaScript, React, Node.js but interested to learn multiple technologies and not stick to dead ones.
Specialization- Building high performance SPAs.
I think by the word 'render' we're talking different things. By render I just mean re-render of React component. It has nothing to do with going to server. I'm just saying components of dashboard page won't render on dashboard/about by default so you need Layout components. But that leads to an issue of loosing internal state even though its a client side transition.
I think Adam has explained the problem really well.
VP of DevRel RapidAPI ❯ Award-winning Web Developer NodeCLI.com ❯ Google Dev Expert Web tech ❯ 2x GitHub Stars Award ❯ WordPress Core Dev ❯ TEDx Speaker ❯ "awesome example for devs" — Satya Nadella
Location
San Francisco Bay Area
Education
EE-CS Engineer turned Software Developer
Work
VP of DevRel (DX Eng., Content & Community) RapidAPI ❯ Google Dev Expert ❯ GitHub Star ❯ NodeCLI.com
But the point being made is that the way components are NOT reused in every route, and sharing the data between components when it comes to nested routing of remix is way more convenient. Static Rendering/SSR is an entirely different topic and it has to do nothing with routing ain't it?
VP of DevRel RapidAPI ❯ Award-winning Web Developer NodeCLI.com ❯ Google Dev Expert Web tech ❯ 2x GitHub Stars Award ❯ WordPress Core Dev ❯ TEDx Speaker ❯ "awesome example for devs" — Satya Nadella
Location
San Francisco Bay Area
Education
EE-CS Engineer turned Software Developer
Work
VP of DevRel (DX Eng., Content & Community) RapidAPI ❯ Google Dev Expert ❯ GitHub Star ❯ NodeCLI.com
How does SSR have anything to do with routing? I think the first user that replied to my comment made a fair point, it's something that I've struggled with personally, and afaik, that has nothing to do with whether or not a page is server-side rendered. Afaik very page component in NextJS gets unmounted before the next page component is mounted, whether or not the page is SSR'd.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
The most striking difference between Remix and Next is that Remix supports Nested Routes.
In Next.js each route is totally independent so when you transition to a route all previous components get unmounted and the next page's components get mounted.
Suppose you render a sidebar in /dashboard. When you go to /dashboard/admin that sidebar won't exist now. To sidestep this issue you'd make layout components and reuse them in every route. However, since the component gets unmounted during the transition they will lose their internal state. If the sidebar had a search field and the user had entered some text in it, that text will be lost on page transition.
In Remix, since it supports nested routes you can choose which part of the dashboard page remains for /dashboard only and which part remains the same for /dashboard and /dashboard/admin. This is a lot less wasteful IMO.
Another benefit of nested routes is that you can get granular data from your loaders. If a user goes from /dashboard to /dashboard/admin, the data of /dashboard need not sent again.
This is just what I've gathered from reading the newsletter. I expect a lot of innovations on top of nested routes.
Regarding comparison with Blitz- Blitz is a framework built on top of Next.js and it owns even more of your stack. Its aim is to give you Ruby on Rails like developer productivity. It includes doing database queries and other superb stuff out of the box. I expect something like it can be built on top of Remix too.
I'm not sure if that's entirety true. Next.js SSR on internal routing would not request a new page/HTML, instead it requests the JSON output of the getServerSideProps of the new page, and then Next.js on the client end, hydrates your new page using that JSON.
Hi Ahmad!
You're totally right in what you're saying. However, the intention of my comment had nothing to do with requesting new HTML. It might have come across that way. Can you point me to the line which is false in my comment?
I'm not trying to point where you're false or not. 😂
I think you believe that the entire page render happens again and again with Next.js which I believe is not true.
SSR DIRECT PAGE REQUEST
When you request this page directly (by entering the page URL in the browser), the page is pre-rendered by the server and sent to the client.
STEP #1: Server pre-renders the page with dynamic data
STEP #2: Client shows the pre-rendered page
SSR CLIENT-SIDE PAGE REQUEST
When you request this page on the client-side page transitions through next/link or next/router (by clicking an internal link on a page)
STEP #1: Next.js sends an API request to the server
STEP #2: Server runs the getServerSideProps
STEP #3: Server returns resulting JSON as a response
STEP #4: Next.js uses this JSON response to render the page
Now mix this with SSG where parts of your page are static. Like you mentioned the sidebar. That can be completely static with no JavaScript at all. Hence creating a hybrid SSR, CSR, SSG page with Next.js can improve perf a lot here.
I think by the word 'render' we're talking different things. By render I just mean re-render of React component. It has nothing to do with going to server. I'm just saying components of dashboard page won't render on dashboard/about by default so you need Layout components. But that leads to an issue of loosing internal state even though its a client side transition.
I think Adam has explained the problem really well.
adamwathan.me/2019/10/17/persisten...
You can handle that with React memorization to a point. The concurrent mode would make things much better. But hey, I get what you mean.
But the point being made is that the way components are NOT reused in every route, and sharing the data between components when it comes to nested routing of remix is way more convenient. Static Rendering/SSR is an entirely different topic and it has to do nothing with routing ain't it?
SSR has a lot to do with routing when you use Next.js. There's a difference in how routing works when you have an SSR page with Next.js.
How does SSR have anything to do with routing? I think the first user that replied to my comment made a fair point, it's something that I've struggled with personally, and afaik, that has nothing to do with whether or not a page is server-side rendered. Afaik very page component in NextJS gets unmounted before the next page component is mounted, whether or not the page is SSR'd.