English

LT会にてWebレンダリングについて発表したことが以下になります。 こちらがspeakerdeckのリンクです またこちらがダウンロードできます

Very simple example to convert React server component(RSC) from Client component. lets look at this code. the export async function addTodo(title: string) { await db.insert(todoTable).values({ title }); revalidatePath("/"); } TodoForm.tsx "use client"; import { useState } from "react"; import { addTodo } from "../server/queries"; export default function TodoForm() { const [title, setTitle] = useState(""); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (title.trim()) { await addTodo(title); setTitle(""); } }; return ( <form onSubmit={handleSubmit} className="flex space-x-2"> <input type="text" value={title} onChange={(e) => setTitle(e....

It has a little bit of new changes on how you access params on server side code(client as well) on Next.js 15. export default async function MediaPage({ params, }: { params: { fileId: string; }; // you could destructure params like this //assume it has path looks like /something/[fileId]/page.tsx const fileId = params.fileId; However, it is giving me a warning something like this Server Error: Route “/galleries/[fileId]” used params.fileId. params should be awaited before using its properties....

intro I have tried to use Next.js Parallel route for modal showing up card component, but keep not showing up and and having a hard time @modal is intercepting route that i was not intended. problem This is the folder structure on next.js project. src │ ├── app │ │ ├── api │ │ │ ├── endemic_life │ │ │ │ └── route.ts │ │ │ ├── monsters │ │ │ │ ├── [monsterId] │ │ │ │ │ └── route....

While I was using “use server” in Next.js, I have encountered keyword “server-only’. I want to dig into this more. “user server” Since Next,js introduced Server Actions, you need to specify that components that are only rendered on server, never on client side code. “use server” on the top of the file. When it was introduced, people were making a meme why they are calling SQL query call inside React Component....

Both Client side rendering and Server side rendering has both pros and cons. Let’s list and see in what situation it can be beneficial and co-live together. I call Client side Rendering as CSR and Server side Rendering as SSR. Client side Rendering If Javascript that client has to load is too big, it will take lots of time to execute Javascript file. If device is very powerful or internet connection is pretty strong, it is not big problem, but it is not always that case....

Introduction As I was learning Server Side Rendering, I noticed that I didn’t pay attention to the detail or how we manage to render in different way and how it has changed in the past. Ill go over the different type of rendering technology. terminology Client : I refer to the user’s browner on their device. It could be PC or smartphone. Server : Organization or individual own or rent and run server....