Robin Wieruch
@rwieruch.bsky.social
React & Next.js • JavaScript & TypeScript • Freelance Full-Stack Web Developer • Technical Co-Founder • Father of 2 • GitHub Star
👀 React + AI
👇 Creating and receiving Structured Output from AI responses for a chatbot with OpenAI + LangChain in a React application.
👇 Creating and receiving Structured Output from AI responses for a chatbot with OpenAI + LangChain in a React application.
January 28, 2025 at 4:58 PM
👀 React + AI
👇 Creating and receiving Structured Output from AI responses for a chatbot with OpenAI + LangChain in a React application.
👇 Creating and receiving Structured Output from AI responses for a chatbot with OpenAI + LangChain in a React application.
👀 React + AI
👇 HTTP streaming AI responses for a chatbot with OpenAI + LangChain in a React application.
👇 HTTP streaming AI responses for a chatbot with OpenAI + LangChain in a React application.
January 21, 2025 at 4:58 PM
👀 React + AI
👇 HTTP streaming AI responses for a chatbot with OpenAI + LangChain in a React application.
👇 HTTP streaming AI responses for a chatbot with OpenAI + LangChain in a React application.
👀 React + AI
👇 MVP for creating a chatbot with OpenAI + LangChain in a React application.
👇 MVP for creating a chatbot with OpenAI + LangChain in a React application.
January 14, 2025 at 4:58 PM
👀 React + AI
👇 MVP for creating a chatbot with OpenAI + LangChain in a React application.
👇 MVP for creating a chatbot with OpenAI + LangChain in a React application.
👀 React 19 Insight
The function signatures of server actions adapt depending on how they are used within a React form.
The function signatures of server actions adapt depending on how they are used within a React form.
January 2, 2025 at 4:58 PM
👀 React 19 Insight
The function signatures of server actions adapt depending on how they are used within a React form.
The function signatures of server actions adapt depending on how they are used within a React form.
👀 React Insight
How to approach server-side form validation with server-driven React while also being able to optionally add client-side form validation later.
How to approach server-side form validation with server-driven React while also being able to optionally add client-side form validation later.
December 17, 2024 at 4:58 PM
👀 React Insight
How to approach server-side form validation with server-driven React while also being able to optionally add client-side form validation later.
How to approach server-side form validation with server-driven React while also being able to optionally add client-side form validation later.
👀 React 19 Insight
Server Components won't eliminate waterfall requests, they only shift where these requests occur.
As a result, using the correct data-fetching patterns remains just as critical in server-driven React applications as it has always been in client-side React.
Server Components won't eliminate waterfall requests, they only shift where these requests occur.
As a result, using the correct data-fetching patterns remains just as critical in server-driven React applications as it has always been in client-side React.
December 3, 2024 at 4:58 PM
👀 React 19 Insight
Server Components won't eliminate waterfall requests, they only shift where these requests occur.
As a result, using the correct data-fetching patterns remains just as critical in server-driven React applications as it has always been in client-side React.
Server Components won't eliminate waterfall requests, they only shift where these requests occur.
As a result, using the correct data-fetching patterns remains just as critical in server-driven React applications as it has always been in client-side React.
👀 Feature-Based React Architecture
In a growing application, it's easy for different domains to become intertwined.
For example, in the UI, a Comment component can quickly end up inside a Post component, and a data-fetching function might be extended beyond its original purpose.
In a growing application, it's easy for different domains to become intertwined.
For example, in the UI, a Comment component can quickly end up inside a Post component, and a data-fetching function might be extended beyond its original purpose.
November 25, 2024 at 4:58 PM
👀 Feature-Based React Architecture
In a growing application, it's easy for different domains to become intertwined.
For example, in the UI, a Comment component can quickly end up inside a Post component, and a data-fetching function might be extended beyond its original purpose.
In a growing application, it's easy for different domains to become intertwined.
For example, in the UI, a Comment component can quickly end up inside a Post component, and a data-fetching function might be extended beyond its original purpose.
Waking up to feedback like this makes my day 🤩
November 25, 2024 at 2:21 PM
Waking up to feedback like this makes my day 🤩
Who else loves IIFEs 🫠
November 21, 2024 at 4:58 PM
Who else loves IIFEs 🫠
👀 The Road to Next
Compared to all the pre-made Next.js starter kits out there, The Road to Next teaches you the knowledge to create your own from scratch.
Compared to all the pre-made Next.js starter kits out there, The Road to Next teaches you the knowledge to create your own from scratch.
November 20, 2024 at 5:03 PM
👀 The Road to Next
Compared to all the pre-made Next.js starter kits out there, The Road to Next teaches you the knowledge to create your own from scratch.
Compared to all the pre-made Next.js starter kits out there, The Road to Next teaches you the knowledge to create your own from scratch.
When have you been using a switch case the last time?
November 14, 2024 at 4:58 PM
When have you been using a switch case the last time?
👀 React 19 insight
Dealing with FormData will become inevitable in React 19. From extracting the data in a concise yet descriptive way to validating and typing it.
Dealing with FormData will become inevitable in React 19. From extracting the data in a concise yet descriptive way to validating and typing it.
November 13, 2024 at 4:58 PM
👀 React 19 insight
Dealing with FormData will become inevitable in React 19. From extracting the data in a concise yet descriptive way to validating and typing it.
Dealing with FormData will become inevitable in React 19. From extracting the data in a concise yet descriptive way to validating and typing it.
👀 React Insight
I like to use kebab-case for all my files, even React components. Many freelance gigs have taught me over the years that kebab-case (or snake_case) is the most reliable way to handle file names across OSs with various case-sensitivity when sharing code with version control.
I like to use kebab-case for all my files, even React components. Many freelance gigs have taught me over the years that kebab-case (or snake_case) is the most reliable way to handle file names across OSs with various case-sensitivity when sharing code with version control.
November 12, 2024 at 4:58 PM
👀 React Insight
I like to use kebab-case for all my files, even React components. Many freelance gigs have taught me over the years that kebab-case (or snake_case) is the most reliable way to handle file names across OSs with various case-sensitivity when sharing code with version control.
I like to use kebab-case for all my files, even React components. Many freelance gigs have taught me over the years that kebab-case (or snake_case) is the most reliable way to handle file names across OSs with various case-sensitivity when sharing code with version control.
TIL about GitHub's sponsor exploration page! Such a cool way to find and support the creators behind the tools one relies on!
November 8, 2024 at 8:24 PM
TIL about GitHub's sponsor exploration page! Such a cool way to find and support the creators behind the tools one relies on!
👀 React Observation
There are multiple ways to fetch data in modern React:
👉 Server-Side 1️⃣
👉 Client-Side 2️⃣
1️⃣ React Server Components (RSC)
2️⃣ React Query (RQ)
1️⃣ + 2️⃣ RSC + RQ
1️⃣ + 2️⃣ React's use API (experimental)
2️⃣ useState + useEffect
2️⃣ tRPC (type-safe E2E)
There are multiple ways to fetch data in modern React:
👉 Server-Side 1️⃣
👉 Client-Side 2️⃣
1️⃣ React Server Components (RSC)
2️⃣ React Query (RQ)
1️⃣ + 2️⃣ RSC + RQ
1️⃣ + 2️⃣ React's use API (experimental)
2️⃣ useState + useEffect
2️⃣ tRPC (type-safe E2E)
November 7, 2024 at 4:58 PM
👀 React Observation
There are multiple ways to fetch data in modern React:
👉 Server-Side 1️⃣
👉 Client-Side 2️⃣
1️⃣ React Server Components (RSC)
2️⃣ React Query (RQ)
1️⃣ + 2️⃣ RSC + RQ
1️⃣ + 2️⃣ React's use API (experimental)
2️⃣ useState + useEffect
2️⃣ tRPC (type-safe E2E)
There are multiple ways to fetch data in modern React:
👉 Server-Side 1️⃣
👉 Client-Side 2️⃣
1️⃣ React Server Components (RSC)
2️⃣ React Query (RQ)
1️⃣ + 2️⃣ RSC + RQ
1️⃣ + 2️⃣ React's use API (experimental)
2️⃣ useState + useEffect
2️⃣ tRPC (type-safe E2E)
👀 React 19 Observation
JS .bind() is becoming popular again! What ended with Class Components in React reclaims its spotlight with Server Actions once more.
JS .bind() is becoming popular again! What ended with Class Components in React reclaims its spotlight with Server Actions once more.
November 6, 2024 at 4:58 PM
👀 React 19 Observation
JS .bind() is becoming popular again! What ended with Class Components in React reclaims its spotlight with Server Actions once more.
JS .bind() is becoming popular again! What ended with Class Components in React reclaims its spotlight with Server Actions once more.
👀 React insight
Organizing React applications beyond 100,000 lines of code 🫠
Folder structures in React tend to be a highly debated topic. Each year, I revisit and refine my approach to organizing React applications.
Let's dive into this 5-step plan.
Organizing React applications beyond 100,000 lines of code 🫠
Folder structures in React tend to be a highly debated topic. Each year, I revisit and refine my approach to organizing React applications.
Let's dive into this 5-step plan.
November 5, 2024 at 4:58 PM
👀 React insight
Organizing React applications beyond 100,000 lines of code 🫠
Folder structures in React tend to be a highly debated topic. Each year, I revisit and refine my approach to organizing React applications.
Let's dive into this 5-step plan.
Organizing React applications beyond 100,000 lines of code 🫠
Folder structures in React tend to be a highly debated topic. Each year, I revisit and refine my approach to organizing React applications.
Let's dive into this 5-step plan.
🤩 Tweet by Guillermo Rauch, creator of Next.js and CEO of Vercel, featuring my book The Road to React made my day. I hope "The Road to Next" will have a similar impact.
October 31, 2024 at 3:58 PM
🤩 Tweet by Guillermo Rauch, creator of Next.js and CEO of Vercel, featuring my book The Road to React made my day. I hope "The Road to Next" will have a similar impact.
👀 JavaScript Insight
Functions tend to evolve over time, often gaining more logic. What starts as a simple "fetch posts by a user" can quickly turn into "fetch posts by a user with specific search, sort, pagination, and other criteria."
To address this, I've started using Options Objects 👇
Functions tend to evolve over time, often gaining more logic. What starts as a simple "fetch posts by a user" can quickly turn into "fetch posts by a user with specific search, sort, pagination, and other criteria."
To address this, I've started using Options Objects 👇
October 29, 2024 at 3:58 PM
👀 JavaScript Insight
Functions tend to evolve over time, often gaining more logic. What starts as a simple "fetch posts by a user" can quickly turn into "fetch posts by a user with specific search, sort, pagination, and other criteria."
To address this, I've started using Options Objects 👇
Functions tend to evolve over time, often gaining more logic. What starts as a simple "fetch posts by a user" can quickly turn into "fetch posts by a user with specific search, sort, pagination, and other criteria."
To address this, I've started using Options Objects 👇
👀 React Insight
URL state is often overlooked. I implemented it in most of my freelance projects over the years, and it had always a big impact on the UX.
Libraries for URL state give you:
👉 typed search parameters
👉 reading and writing to/from URLs
👉 both simple and complex data types
URL state is often overlooked. I implemented it in most of my freelance projects over the years, and it had always a big impact on the UX.
Libraries for URL state give you:
👉 typed search parameters
👉 reading and writing to/from URLs
👉 both simple and complex data types
October 24, 2024 at 3:58 PM
👀 React Insight
URL state is often overlooked. I implemented it in most of my freelance projects over the years, and it had always a big impact on the UX.
Libraries for URL state give you:
👉 typed search parameters
👉 reading and writing to/from URLs
👉 both simple and complex data types
URL state is often overlooked. I implemented it in most of my freelance projects over the years, and it had always a big impact on the UX.
Libraries for URL state give you:
👉 typed search parameters
👉 reading and writing to/from URLs
👉 both simple and complex data types
🔥 React 19: Using a button in a form without any other form fields will become a new* pattern in React.
This approach allows you to maintain a component as a Server Component while still performing an operation by clicking the button.
*not a new pattern in HTML itself
This approach allows you to maintain a component as a Server Component while still performing an operation by clicking the button.
*not a new pattern in HTML itself
October 23, 2024 at 3:58 PM
🔥 React 19: Using a button in a form without any other form fields will become a new* pattern in React.
This approach allows you to maintain a component as a Server Component while still performing an operation by clicking the button.
*not a new pattern in HTML itself
This approach allows you to maintain a component as a Server Component while still performing an operation by clicking the button.
*not a new pattern in HTML itself
👀 Next.js 15 & React 19
Server Actions can be used to fetch data in Client Components, but it's not recommended. Drawbacks:
❌ Limited to HTTP POST
❌ Executed Sequentially
❌ ... ?
That's why Server Actions are becoming a subset of Server Functions! Eventually they will allow you to fetch data.
Server Actions can be used to fetch data in Client Components, but it's not recommended. Drawbacks:
❌ Limited to HTTP POST
❌ Executed Sequentially
❌ ... ?
That's why Server Actions are becoming a subset of Server Functions! Eventually they will allow you to fetch data.
October 22, 2024 at 3:58 PM
👀 Next.js 15 & React 19
Server Actions can be used to fetch data in Client Components, but it's not recommended. Drawbacks:
❌ Limited to HTTP POST
❌ Executed Sequentially
❌ ... ?
That's why Server Actions are becoming a subset of Server Functions! Eventually they will allow you to fetch data.
Server Actions can be used to fetch data in Client Components, but it's not recommended. Drawbacks:
❌ Limited to HTTP POST
❌ Executed Sequentially
❌ ... ?
That's why Server Actions are becoming a subset of Server Functions! Eventually they will allow you to fetch data.
🤔 How do you feel about React becoming a full-stack framework?
The image below lives rent-free in my head 🙃 Server Components and Server Actions will transform React into a full-stack framework ✨ Personally, I've come to embrace this paradigm shift!
#ReactJS
https://buff.ly/47JsHZG
The image below lives rent-free in my head 🙃 Server Components and Server Actions will transform React into a full-stack framework ✨ Personally, I've come to embrace this paradigm shift!
#ReactJS
https://buff.ly/47JsHZG
October 1, 2024 at 3:56 PM
🤔 How do you feel about React becoming a full-stack framework?
The image below lives rent-free in my head 🙃 Server Components and Server Actions will transform React into a full-stack framework ✨ Personally, I've come to embrace this paradigm shift!
#ReactJS
https://buff.ly/47JsHZG
The image below lives rent-free in my head 🙃 Server Components and Server Actions will transform React into a full-stack framework ✨ Personally, I've come to embrace this paradigm shift!
#ReactJS
https://buff.ly/47JsHZG
🔥 React 19 tip:
There are two ways to send extra arguments with Server Actions:
👉 HTML input with type="hidden"
👉 JavaScript .bind() on the server action
The latter often requires explanation for non-native JavaScript developers on a team. That's why I prefer the former.
#ReactJS
There are two ways to send extra arguments with Server Actions:
👉 HTML input with type="hidden"
👉 JavaScript .bind() on the server action
The latter often requires explanation for non-native JavaScript developers on a team. That's why I prefer the former.
#ReactJS
September 25, 2024 at 3:56 PM
🔥 React 19 tip:
There are two ways to send extra arguments with Server Actions:
👉 HTML input with type="hidden"
👉 JavaScript .bind() on the server action
The latter often requires explanation for non-native JavaScript developers on a team. That's why I prefer the former.
#ReactJS
There are two ways to send extra arguments with Server Actions:
👉 HTML input with type="hidden"
👉 JavaScript .bind() on the server action
The latter often requires explanation for non-native JavaScript developers on a team. That's why I prefer the former.
#ReactJS
