How to combine React Native Web + responsivity + NextJS SSR, to get SEO

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • JetBrains - Developer Ecosystem Survey 2022
  • Scout APM - Less time debugging, more time building
  • SonarLint - Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
  • dripsy

    🍷 Responsive, unstyled UI primitives for React Native + Web.

    This article is extracted from this github discussion, which goes into greater detail on how to achieve this with the libraries Dripsy (a component design system) and Fresnel (SSR w/ media queries).

  • @artsy/fresnel

    An SSR compatible approach to CSS media query based responsive layouts for React.

    This article is extracted from this github discussion, which goes into greater detail on how to achieve this with the libraries Dripsy (a component design system) and Fresnel (SSR w/ media queries).

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • react-native-media-query

    Media queries for react-native and react-native-web

    Forking RNW is an option. But if you are worried about maintaining a fork of RNW with potential style inconsistencies, then react-native-media-query is already that fork. It attempts to do media queries inside RNW's StyleSheet.

  • rendertron

    A Headless Chrome rendering solution

    Googlebot: SSR a non-responsive mobile version only for the Googlebot User Agent, to get SEO. But do Client-Side Rendering (CSR) for users, to get full responsivity. Could be done with manual user-agent sniffing, or with a GoogleChrome/Rendertron proxy. Though Google may not like being fed something different than users (different initial markup, even though resulting markup after React’s first CSR should be the same). But it might be problematic long-term to SSR only for the Googlebot, since it’s effectively serving the Googlebot something else than what the users get.. Google might crack down on it, since it could be abused.

  • detect-responsive-traits

    Determine responsive traits to only server-side render markup truly needed.

    Optimise Fresnel with detect-responsive-traits: SSR based on sniffing user-agent where it can, but all breakpoints if not. To optimise bytes sent over-the-wire.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts