docs(isBrowser/isServer): explain why those helpers are useful

[maiieul]

Overview

What is it?

• Feature / enhancement
• Bug
• Docs / tests / types / typos

Description

A lot of developers are used to simply using if(typeof window !== 'undefined'). I tried to improve the docs on why are isServer/isBrowser needed.

Use cases and why

• 1. One use case
• 2. Another use case

Checklist:

• My code follows the developer guidelines of this project
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• Added new tests to cover the fix / functionality

[netlify]

👷 Deploy request for qwik-insights pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	f693bab

[wmertens]

Great, but the test is actually not done at runtime. The qwik plugin sets the variables at build time so that the minification can eliminate the unused code entirely. The code you found is a fallback that never gets used.

  function getQwikBuildModule(isSSR: boolean, target: QwikBuildTarget) {
    const isServer = isSSR || target === 'test';
    const isDev = opts.buildMode === 'development';
    return `// @builder.io/qwik/build
export const isServer = ${JSON.stringify(isServer)};
export const isBrowser = ${JSON.stringify(!isServer)};
export const isDev = ${JSON.stringify(isDev)};
`;
  }

[maiieul]

Ah interesting, thanks! So for example if I was building an app with 2 versions - one SSR for the website, one CSR for the mobile app - then the bundler would be able at build time to remove the if(isBrowser) {...} on SSR, and remove the if(isServer) {...} on CSR?

If yes, do you see any more common use cases or more straightforward benefits that I could outline in the docs?

[wmertens]

If yes, do you see any more common use cases or more straightforward benefits that I could outline in the docs?

Maybe that this is also used to remove imports on the CSR build. The optimizer assumes that all named imports are side-effect free on the client and so if something is only used inside server$, it won't be imported on the client.

[maiieul]

Oh I think I get it! thanks, I'll try to outline it in the docs :)

[gioboa]

I like it 👏 Thanks @maiieul

[PatrickJS]

looks good to me can we merge this?

merging