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

• dripsy

  7 1,951 6.2 TypeScript

  🍷 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

  8 1,212 7.1 TypeScript

  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).

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• react-native-media-query

  3 73 0.0 JavaScript

  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

  15 5,868 0.0 TypeScript

  Discontinued 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

  2 39 5.1 TypeScript

  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.

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

Suggest a related project