How can you prevent client-side code from running on server?

Hey friend,

I've been overwhelmed by how many of you have signed up for the Ship React Challenge. Thank you for signing up!

ICYMI, it's a challenge where you Ship 5 React apps in 5 days.

Here is a theme of what we will be building as part of the challenge,

Interactive Markdown app
Add Whimsy to your apps (Animations)
Spotify Wrapped (Github Wrapped)
React performance using React profiler
AI app using Chat GPT

I'm releasing this to you before everyone else, as newsletter subscribers always get first dibs on everything I've been working on before everyone else. 💖

Add me to the Challenge 💪

As an email subscriber, you won't need to re-confirm your email.
Just Click the above magical ✨ "add me to the challenge" ✨ button, and you'll be added to the challenge!

You will get a lot of direct help from me and accountability from the community and me, hence take advantage of this challenge.

I'm announcing the challenge on Twitter tomorrow so would appreciate it if you can drop by, comment, RT and show your support. 🙏

Alright, moving on to our weekly Frontend Snack.

Have you ever wondered how, in a framework where you can do both server-side rendering and client-side rendering, we can prevent our client-side code from running on the server? 🤔

In a framework like Next.js, your code will run on the server, but not all code can run on the server. Since the Server doesn't have access to the "window" object and a browser, it's impossible.

So, how can we avoid it? Well, we can avoid it by only invoking the code when the component has mounted and when it's our server running it, skip running client-side code.

Let's go over the snippet below. 👇

1️⃣ First Snippet: useHasMounted

In the first snippet, we have created a new React hook called 'useHasMounted' where we set the property of 'hasMounted' to true when useEffect runs the first time. Notice the empty dependency array, which means it will only run when the component has mounted, and until then, hasMounted will be false.

Because useEffect only runs on the client side, it never runs on the server, so it's a good idea to take advantage of it.

2️⃣ Second Snippet: Usage of useHasMounted

In the 2nd snippet, we only render the TwitterFeed component when hasMounted is true. In this case, we don't want to run TwitterFeed on the server as it uses a bunch of client-side code, such as where the Twitter script needs to be loaded.

This custom hook is convenient for preventing code from running on the server. I use it on my website for precisely this purpose.

You can copy-paste this snippet by clicking on the snippet 🎉

Latest Frontend Gossip/News 🤫

Reactjs has a documentary: They just released a trailer on how React has evolved. You should check it out; it's fun.
ChatGPT: Oh boy, this AI tool is so good that it has scared the hell out of many folks. If you ask a question, you won't be able to differentiate if it's a human or not 🤯.

Snack for Thought 💭

Will tools like ChatGPT replace writing for humans? Will we adopt them to replace us or use them to our advantage?

I see it as a way to give us quick ideas and get over writer's block, but I don't think it'll replace humans.

Frontend Developers Toolbox 🧰

Unjs: Unified JavaScript Tool
Remotion: Create MP4 motion graphics in React. Leverage CSS, SVG, WebGL and more technologies to render videos programmatically!

That's all from me. Have a great day!