TTC
Theo's Typesafe Cult•13mo ago
dinislam

How to server-render (SSR) a client component using Next.js app router?

Hey folks, This question might seem a little confusing. I'm learning about the app router and I'm wondering how I can achieve server-side rendering of the client components in the app router? I want the client component first render to be server-side, then the client component gets hydrated, then the subsequent rerenders will be client-side. This is needed for SEO. I've been looking at this app router example: https://netflx-web.vercel.app/ (source: https://github.com/sadmann7/netflx-web). What I noticed is that if you disable javascript, the website doesn't show the list of shows. Ideally, I would like this to show a list of shows even if JS is disabled.
Netflix Web
Netflix Web
An open source Netflix clone built using the new app router, server components, trpc, and everything new in Next.js 13.
2 Replies
Grey
Grey•13mo ago
isn't that just....... ISR?
dinislam
dinislam•13mo ago
Nope, ISR is something else. I was wondering how to get getServerSideProps-like behavior in App Router (first render is SSR, then hydration, then subsequent rerenders are client-side), but in my own testing that already seems like the default behavior with App Router Client Components. Now, I still don't know why the example I linked doesn't do that, so will have to dig in further.
Want results from more Discord servers?
Add your server
More Posts
is nest js the laravel of the javascript land?I really love the laravel approach like all the batteries to implement nearly anything you want out NEXT edge api routes: sending a json responseI'm currently migrating my app to work with edge worked fine so far until i tried to return json to What kind of headless CMS would you chose in 2023?Hey out there 🙂 I am currently building a website, which needs some sort of Backend for users, iIs it possible to use t3env from a Drizzle config file?I'm using create-t3-app but I'd like to use Drizzle instead of Prisma. I've managed to get it workinApp dir + tRPC +Hi, I am setting up a project with [create-t3-app@7.13.2-beta.ca0b017 + /app + tRPC (v10.27.1) + @taTailwind - className did not matchI get this warning all the time: ``` Warning: Prop `className` did not match. Server: "fixed top-0 lGet Active Link from Server Component (Next.js 13.4)I was making a basic Navigation for a Webpage. Since all React Components in Next 13.3 are by defaulServerActions and ISRHey, does anyone know how to do on demand revalidation (ISR) using the new AppRouter? mainly non fetHow to make a monorepo using create-t3 app.I need to have a script that can be run and access prisma, as well as the normal nextjs app. https:/Prisma Date Day OffHello, I currently have the following: ```prisma model SomeModel { date DateTime @db.Date() }