Design Converter
Flutter
React
Shopify
Flutter
React
Shopify
Discord
Discord
Education
Software Development Executive - I
Last updated on Sep 15, 2023
Last updated on Aug 2, 2023
Hello there! If you're like me, you spend countless hours crafting functional components, perfecting the component logic, and building captivating user interfaces for your React app. It's like a never-ending puzzle with an infinite number of solutions, right? But, have you ever stopped and wondered about the rendering patterns you're using?
Today, I'm going to walk you through the fascinating world of modern rendering patterns. Now, I know what you're thinking, "Why should I care about rendering patterns?" Well, let me tell you, my friend, understanding rendering patterns is as crucial as understanding your React components. It's like knowing the secret sauce that makes your React app sizzle!
One of the fascinating aspects of these patterns is the interaction between higher-order components. These functions that take a component and return a new component with extra properties or behaviors are referred to as HOCs. They're like the seasoned conductors of an orchestra, guiding the symphony of components to create a harmonious React component tree.
Rendering patterns are the blueprints for how your React components come to life on the screen. They're the conductors orchestrating the symphony of component logic, leading the way for your react functional components, container components, and presentational components to play their parts in harmony. 🎼
Imagine you're building a house. You wouldn't just start slapping bricks together, would you? (If you would, we need to have a different conversation!) No, you'd start with a blueprint. That's what rendering patterns are for your React app. They're the blueprint that guides how your components - The bricks in this metaphor - Come together to build your user interfaces.
Now, let's dive into this exhilarating journey of rendering patterns. Buckle up, and let's get 'React'ing!
1 import React from 'react'; 2 3 export default function App() { 4 return ( 5 <div> 6 <h1>Hello, world!</h1> 7 </div> 8 ); 9 } 10
This is a basic functional component in a React app. Simple, yet powerful. But as our React app grows, we'll be dealing with multiple components, and that's where the fun begins!
1 import React from 'react'; 2 3 function withUser(Component) { 4 return function EnhancedComponent(props) { 5 const user = fetchUser(props.userId); 6 return <Component {...props} user={user} />; 7 }; 8 } 9 10 class Profile extends React.Component { 11 render() { 12 return ( 13 <div> 14 <h1>Welcome to my profile, {this.props.user.name}!</h1> 15 </div> 16 ); 17 } 18 } 19 20 export default withUser(Profile); 21
Here's an example of a higher-order component. Notice how the withUser HOC wraps the Profile component and enhances it with user data? That's the beauty of HOCs. They allow us to reuse component logic and keep our code DRY (Don't Repeat Yourself).
But as our React app grows, so does the complexity. We start dealing with state management, conditional rendering, fetching data, and more. That's when rendering patterns come to our rescue. They help us manage this complexity and keep our code clean and maintainable.
So, are you ready to dive deeper into the rabbit hole of rendering patterns? Let's go!
Alright, now that we're all warmed up, let's talk about something that's close to my heart, and should be close to yours too if you're building a React app - Core Web Vitals.
Consider Core Web Vitals as the vital signs for your React app. Just like how doctors monitor heart rate, blood pressure, and body temperature to assess our health, we, as developers, monitor Core Web Vitals to assess the health of our React app.
In the world of web apps, Core Web Vitals are the key metrics that measure user experience. They focus on three aspects: loading performance, interactivity, and visual stability. And trust me, nothing makes a user hit that back button faster than a slow, unresponsive, or visually jarring web app.
1 import React from 'react'; 2 3 class Users extends React.Component { 4 componentDidMount() { 5 fetch('https://api.example.com/users') 6 .then((response) => response.json()) 7 .then((data) => this.setState({ users: data })); 8 } 9 10 render() { 11 return ( 12 <div> 13 <h1>Users</h1> 14 {/* Render users here */} 15 </div> 16 ); 17 } 18 } 19 20 export default Users; 21
In this example, we're fetching data in the componentDidMount lifecycle method. This is a common pattern in class components. However, fetching data like this could potentially affect the loading performance of our React app, which is one of the Core Web Vitals.
But don't worry, modern rendering patterns have got our back. They provide us with ways to optimize these Core Web Vitals, ensuring our React app is in the pink of health. So, let's roll up our sleeves and dive into these rendering patterns!
So, we've talked about the user's experience, but what about ours, the developers? After all, we're the ones spending hours staring at the screen, wrestling with the code, and occasionally talking to the rubber duck on our desk.
Developer Experience (DX) is all about how we, the developers, interact with the tools and technologies we use every day. And when it comes to building a React app, DX is often influenced by the rendering patterns we choose.
1 import React from 'react'; 2 3 class Profile extends React.Component { 4 render() { 5 return ( 6 <div> 7 <h1>Welcome to my profile!</h1> 8 </div> 9 ); 10 } 11 } 12 13 export default Profile; 14
For example, class components like the one above were the standard in React for a long time. But they come with their own set of challenges, like managing this context and dealing with lifecycle methods. This can sometimes lead to a less-than-ideal DX.
1 import React, { useState } from 'react'; 2 3 function Profile() { 4 const [name, setName] = useState('John Doe'); 5 6 return ( 7 <div> 8 <h1>Welcome, {name}!</h1> 9 </div> 10 ); 11 } 12 13 export default Profile; 14
Enter functional components and React hooks. They've revolutionized the way we write React components, making our code more readable and maintainable, and our DX more enjoyable.
But that's not all. Modern rendering patterns take DX to the next level by providing us with ways to handle complex tasks like data fetching, state management, and conditional rendering in a more intuitive and efficient way.
So, ready to level up your DX? Let's dive into these modern rendering patterns!
Now, we've talked about Core Web Vitals and Developer Experience, but there's another crucial aspect that ties these two together - Performance.
Performance in a React app is like the engine in a sports car. It doesn't matter how good the car looks or how comfortable the seats are, if the engine isn't top-notch, you're not going to win any races.
1 import React, { useState, useEffect } from 'react'; 2 3 function Users() { 4 const [users, setUsers] = useState([]); 5 6 useEffect(() => { 7 fetch('https://api.example.com/users') 8 .then((response) => response.json()) 9 .then((data) => setUsers(data)); 10 }, []); 11 12 return ( 13 <div> 14 <h1>Users</h1> 15 {/* Render users here */} 16 </div> 17 ); 18 } 19 20 export default Users; 21
In this example, we're fetching data in a useEffect hook. This is a common pattern in functional components. However, fetching data like this could potentially affect the performance of our React app, especially if we're dealing with large amounts of data or complex operations.
But fear not, my fellow developers! Modern rendering patterns provide us with ways to optimize performance, ensuring our React app runs as smoothly as a well-oiled machine. So, let's put the pedal to the metal and explore these rendering patterns!
Alright, let's shift gears and talk about a rendering pattern that's been around since the dawn of the web - Static Rendering.
Static Rendering is like the steady rock in a sea of change. Despite all the advancements in web development, it has stood the test of time, proving its worth time and again.
1 import React from 'react'; 2 3 function User({ name }) { 4 return <h1>Welcome, {name}!</h1>; 5 } 6 7 export default function App() { 8 return ( 9 <div> 10 <User name="John Doe" /> 11 </div> 12 ); 13 } 14
In this example, we're rendering a User component with a static prop. This is a simple example of static rendering. The component will always render the same output for the same input, no matter when or where it's rendered.
Plain Static Rendering is as simple as it gets. You have some data, you have a template, you combine the two, and voila, you have a static HTML page.
1 import React from 'react'; 2 3 function User({ name }) { 4 return <h1>Welcome, {name}!</h1>; 5 } 6 7 export default function App() { 8 return ( 9 <div> 10 <User name="John Doe" /> 11 </div> 12 ); 13 } 14
In this example, we're using plain static rendering to render a User component with a static prop. It's simple, straightforward, and efficient.
But as our React app grows and becomes more dynamic, plain static rendering might not cut it. That's where the other flavors of static rendering come in.
Remember, static rendering is like the tortoise in the Tortoise and the Hare story. It might not be flashy, but it gets the job done, and sometimes, that's all you need.
Now, let's spice things up a bit. What if we could have the best of both worlds - The efficiency of static rendering and the dynamism of client-side data fetching? Well, we can! Let's talk about Static Rendering with Client Side Fetch.
1 import React, { useState, useEffect } from 'react'; 2 3 function App() { 4 const [data, setData] = useState(null); 5 6 useEffect(() => { 7 fetch('/api/data') 8 .then((response) => response.json()) 9 .then((data) => setData(data)); 10 }, []); 11 12 return ( 13 <div> 14 <h1>Data fetched from the client side:</h1> 15 {/* Render data here */} 16 </div> 17 ); 18 } 19 20 export default App; 21
In this example, we're fetching data from the client side using the fetch API inside a useEffect hook. This allows us to fetch dynamic data after the initial static render, giving our users a fast initial load time while still providing the dynamic content they need.
But, as Uncle Ben once said, "With great power comes great responsibility."
Fetching data on the client side means we're shifting the responsibility of fetching and rendering data from the server to the client. This can lead to issues like increased client-side processing and potential delays in rendering dynamic content.
But don't worry, that's where our next rendering pattern comes in. So, let's keep the ball rolling!
Alright, folks, let's keep the momentum going. Next up, we have Static Rendering with getStaticProps. This is a feature provided by Next.js, a popular React framework, and it's a game-changer for static rendering.
1 import React from 'react'; 2 3 export async function getStaticProps() { 4 const res = await fetch('https://api.example.com/posts'); 5 const posts = await res.json(); 6 7 return { 8 props: { 9 posts, 10 }, 11 }; 12 } 13 14 function Blog({ posts }) { 15 return ( 16 <div> 17 <h1>Blog Posts</h1> 18 {/* Render posts here */} 19 </div> 20 ); 21 } 22 23 export default Blog; 24
In this example, we're using getStaticProps to fetch data at build time. This allows us to generate static HTML pages with dynamic data, giving us the best of both worlds. It's like having your cake and eating it too!
But remember, getStaticProps runs at build time, not runtime. This means it can't be used for data that changes frequently or data that's user-specific. For that, we have other rendering patterns, which we'll explore next.
Now, let's talk about a rendering pattern that's truly the best of both worlds - Incremental Static Regeneration (ISR). This is another feature provided by Next.js, and it's a game-changer for static rendering.
1 import React from 'react'; 2 3 export async function getStaticProps() { 4 const res = await fetch('https://api.example.com/posts'); 5 const posts = await res.json(); 6 7 return { 8 props: { 9 posts, 10 }, 11 revalidate: 1, 12 }; 13 } 14 15 function Blog({ posts }) { 16 return ( 17 <div> 18 <h1>Blog Posts</h1> 19 {/* Render posts here */} 20 </div> 21 ); 22 } 23 24 export default Blog; 25
In this example, we're using ISR to fetch data at build time, just like we did with getStaticProps. But there's a twist. See that revalidate key in the returned object? That tells Next.js to regenerate the page at most once every second, whenever a request comes in.
This means we can have a static page that's always up-to-date with the latest data, without having to rebuild our entire app. It's like having a self-updating static page. How cool is that?
But wait, there's more! What if we could regenerate our static pages only when we need to? Well, we can! This is called On-Demand Incremental Static Regeneration.
1 import React from 'react'; 2 3 export async function getStaticPaths() { 4 return { 5 paths: [], 6 fallback: 'blocking', 7 }; 8 } 9 10 export async function getStaticProps({ params }) { 11 const post = await fetchPostData(params.id); 12 13 return { 14 props: { 15 post, 16 }, 17 revalidate: 1, 18 }; 19 } 20 21 function Post({ post }) { 22 return ( 23 <div> 24 <h1>{post.title}</h1> 25 {/* Render post content here */} 26 </div> 27 ); 28 } 29 30 export default Post; 31
In this example, we're using getStaticPaths with fallback: 'blocking' to enable On-Demand ISR. This tells Next.js to generate the pages on-demand as requests come in. This is perfect for pages with a large number of routes, like a blog with thousands of posts.
After exploring the exciting world of Incremental Static Regeneration, let's now turn our attention to a rendering pattern that's all about efficiency - Static Generation.
1 import React from 'react'; 2 3 export async function getStaticProps() { 4 const res = await fetch('https://api.example.com/posts'); 5 const posts = await res.json(); 6 7 return { 8 props: { 9 posts, 10 }, 11 }; 12 } 13 14 function Blog({ posts }) { 15 return ( 16 <div> 17 <h1>Blog Posts</h1> 18 {/* Render posts here */} 19 </div> 20 ); 21 } 22 23 export default Blog; 24
In this example, we're using Static Generation to pre-render our page at build time. This means our page is ready to be served as soon as a request comes in, providing a fast initial load time for our users. It's like having a meal ready to serve as soon as your guests arrive.
Static Generation is perfect for pages that can be pre-rendered ahead of a user's request. This includes pages like blog posts, product listings, or any page where the data can be fetched at build time.
But what if our data changes frequently or is user-specific? That's where our next rendering pattern comes in.
Let's talk about a rendering pattern that's all about dynamism - Server-Side Rendering (SSR).
1 import React from 'react'; 2 3 export async function getServerSideProps() { 4 const res = await fetch('https://api.example.com/user'); 5 const user = await res.json(); 6 7 return { 8 props: { 9 user, 10 }, 11 }; 12 } 13 14 function Profile({ user }) { 15 return ( 16 <div> 17 <h1>Welcome, {user.name}!</h1> 18 {/* Render user profile here */} 19 </div> 20 ); 21 } 22 23 export default Profile; 24
In this example, we're using SSR to fetch and render data on the server for each request. This means our page is always up-to-date with the latest data, even if it changes frequently or is user-specific. It's like having a personal chef who prepares a fresh meal for you every time you're hungry.
SSR is perfect for pages that need to be highly dynamic or SEO-friendly. This includes pages like user profiles, real-time dashboards, or any page where the data needs to be fetched and rendered for each request.
But SSR comes with its own set of challenges, like increased server load and potential delays in rendering. That's where our next rendering pattern comes in.
Now, let's talk about optimizing SSR performance. After all, what good is a dynamic page if it takes forever to load, right?
1 import React from 'react'; 2 3 export async function getServerSideProps() { 4 const res = await fetch('https://api.example.com/user'); 5 const user = await res.json(); 6 7 return { 8 props: { 9 user, 10 }, 11 }; 12 } 13 14 function Profile({ user }) { 15 return ( 16 <div> 17 <h1>Welcome, {user.name}!</h1> 18 {/* Render user profile here */} 19 </div> 20 ); 21 } 22 23 export default Profile; 24
In this example, we're using SSR to fetch and render data on the server. But fetching data like this could potentially affect the performance of our page, especially if we're dealing with large amounts of data or complex operations.
But fear not! There are techniques to optimize SSR performance, like code splitting, caching, and incremental rendering.
Now that we've got a handle on basic SSR, let's kick things up a notch. Welcome to the world of Edge Server Side Rendering (Edge SSR).
1 import React from 'react'; 2 3 export async function getEdgeProps() { 4 const res = await fetch('https://api.example.com/posts'); 5 const posts = await res.json(); 6 7 return { 8 props: { 9 posts, 10 }, 11 revalidate: 1, 12 }; 13 } 14 15 function Blog({ posts }) { 16 return ( 17 <div> 18 <h1>Blog Posts</h1> 19 {/* Render posts here */} 20 </div> 21 ); 22 } 23 24 export default Blog; 25
In this example, we're using Edge SSR to pre-render our page at the edge server closest to the user. This means our page is not only up-to-date with the latest data but it's also served at lightning speed. It's like having a personal chef right next to you, ready to serve a fresh meal instantly.
Edge SSR is perfect for pages that need to be highly dynamic and super-fast. This includes pages like user profiles, real-time dashboards, or any page where the data changes frequently and speed is of the essence.
But Edge SSR comes with its own set of challenges, like managing cache invalidation and server resources. That's where our next rendering pattern comes in. So, let's keep exploring!
After exploring the speed of Edge SSR, let's now turn our attention to a rendering pattern that's all about flexibility - Serverless Server Side Rendering (Serverless SSR).
1 import React from 'react'; 2 3 export async function getServerlessProps() { 4 const res = await fetch('https://api.example.com/posts'); 5 const posts = await res.json(); 6 7 return { 8 props: { 9 posts, 10 }, 11 }; 12 } 13 14 function Blog({ posts }) { 15 return ( 16 <div> 17 <h1>Blog Posts</h1> 18 {/* Render posts here */} 19 </div> 20 ); 21 } 22 23 export default Blog; 24
In this example, we're using Serverless SSR to pre-render our page on a serverless function. This means our page is always up-to-date with the latest data, and we only pay for the server resources we use. It's like having a personal chef who only cooks when you're hungry.
Serverless SSR is perfect for pages that need to be highly dynamic and cost-efficient. This includes pages like user profiles, real-time dashboards, or any page where the data changes frequently and server resources are a concern.
But Serverless SSR comes with its own set of challenges, like cold starts and potential delays in rendering. That's where our next rendering pattern comes in.
Alright, folks, it's time for the grand finale. Let's talk about a rendering pattern that's straight out of a sci-fi movie - Edge Streaming Server Side Rendering (Edge Streaming SSR).
1 import React from 'react'; 2 3 export async function getEdgeStreamProps() { 4 const res = await fetch('https://api.example.com/posts'); 5 const posts = await res.json(); 6 7 return { 8 props: { 9 posts, 10 }, 11 }; 12 } 13 14 function Blog({ posts }) { 15 return ( 16 <div> 17 <h1>Blog Posts</h1> 18 {/* Render posts here */} 19 </div> 20 ); 21 } 22 23 export default Blog; 24
In this example, we're using Edge Streaming SSR to stream our page from the edge server closest to the user. This means our page is not only up-to-date with the latest data but it's also served at lightning speed, piece by piece. It's like having a personal chef who serves each dish as soon as it's ready.
Edge Streaming SSR is perfect for pages that need to be highly dynamic, super-fast, and interactive. This includes pages like real-time dashboards, live blogs, or any page where the data changes frequently and user interaction is high.
But Edge Streaming SSR is a cutting-edge technology (pun intended), and it comes with its own set of challenges, like managing the streaming state and handling user interaction during streaming.
But as we've seen throughout this blog, every rendering pattern has its strengths and weaknesses, and the key is to choose the right pattern for the right situation.
We've journeyed through the vast landscape of rendering patterns, exploring the fascinating intricacies of React components and component logic. From the steadfast reliability of static rendering to the dynamic versatility of Server-Side Rendering, and the futuristic potential of Edge Streaming SSR, we've seen it all.
But remember, there's no one-size-fits-all when it comes to rendering patterns. Each pattern has its strengths and weaknesses, and the key is to choose the right pattern for the right situation. It's like choosing the right tool for the job.
But as we reach the end of this journey, it's time to look towards the horizon and the exciting new tools that are emerging in our field. One such tool that I'm thrilled to introduce you to is WiseGPT, a revolutionary plugin developed by DhiWise.
WiseGPT is designed to generate all the code for APIs directly into your React project, mirroring your coding style and eliminating the need for manual API requests, response parsing, and error management strategies for complicated API endpoints. The best part? There's no limit on the output size, and it auto-creates models and functions.
So, as we wrap up our exploration of rendering patterns, I invite you to embark on a new journey with WiseGPT. Try it out, experiment with it, and see how it can transform the way you work with APIs in your React projects.
Keep exploring, keep experimenting, and most importantly, keep 'React'ing! Because in the world of React, the only constant is change. And who knows, the next rendering pattern might just be around the corner!
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.
