question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Q: How to execute code client-side only

See original GitHub issue

I have a callback route in my application that receives access token from auth process in URL hash fragment. I’d like to parse it and save into redux store. I used to get it through window.location.hash before I switched to next, but this is not available when page renders server-side (also the hash fragment apparently isn’t sent to server, so I can’t parse it there).

Is there any way to restrict some code to execute only in client-side? Or is there any other way to achieve this?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:21 (10 by maintainers)

github_iconTop GitHub Comments

70reactions
zenflowcommented, Aug 11, 2020

@vanniewelt You can always look at process.browser

if (process.browser) {
  // client-side-only code
}

edit by @Timer:

@vanniewelt You can always look at typeof window

if (typeof window !== 'undefined') {
  // client-side-only code
}
56reactions
timneutkenscommented, Jul 5, 2017

You can also use the componentDidMount lifecycle method of React. It’s not called server side.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Next.js: run code only on the server side or client side in Next.js
In your page components, you can execute code only in the server-side or on the client-side, but checking the window property.
Read more >
How to use client-side only packages with SSR in Gatsby and ...
This is how server-side rendering works: the server we requested the page from executes all the code in a node server: your browser...
Read more >
How is client-side code run on server-side? - Stack Overflow
It is the environment where the code is being executed. In your server you have a container that is interpreting you C# code...
Read more >
Render client-side only component in Next.js
How to make code run only on client-side with Next.js? To my surprise, this is surprisingly easy. Next.js inherited the process.browser ...
Read more >
Using Client-Side Only Packages - Gatsby
On occasion, you may need to use a function or library that only works client-side. This usually is because the library in question...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found