react-server | Blazing fast page load and seamless navigation | Server Side Rendering library

I'm not sure if React is a framework that suits your needs. Server-side rendering can be accomplished much easier and more efficiently using a framework like NextJS.

React renders on the client side by default. Most search engine bots however, cannot read JavaScript. Therefore, using server-side rendering is better for SEO, because it generates a static HTML file on the server, which is then served to the client.

Another difference is that client-side rendering will take longer to load the first time, but all consecutive times it will render faster (if the client didn't disable cache). A server-side rendered website has to render the page everytime it loads on the server. Making it slightly slower on average, but will provide consistent loading speeds and a faster first-time loading speed which is important for business landing pages as an example.

It looks like by mistake you have used apiKey in App.js file as your state variable. It should be replaced by settings.

No.

From https://github.com/josephsavona/rfcs/blob/server-components/text/0000-server-components.md#capabilities--constraints-of-server-and-client-components :

Server Components: As a general rule, Server Components run once per request on the server, so they don’t have state and can’t use features that only exist on the client. Specifically, Server Components:

• ❌ May not use state, because they execute (conceptually) only once per request, on the server. So useState() and useReducer() are not supported.
• ❌ May not use rendering lifecycle (effects). So useEffect() and useLayoutEffect() are not supported.
• ❌ May not use browser-only APIs such as the DOM (unless you polyfill them on the server).
• ❌ May not use custom hooks that depend on state or effects, or utility functions that depend on browser-only APIs.
• ✅ May use server-only data sources such as databases, internal (micro)services, filesystems, etc.
• ✅ May render other Server Components, native elements (div, span, etc), or Client Components.

Server Hooks/Utilities: Developers may also create custom hooks or utility libraries that are designed for the server. All of the rules for Server Components apply. For example, one use-case for server hooks is to provide helpers for accessing server-side data sources.

Well, actually it is still a complicated issue for all of us to realize when to use import React from "react"; and when not to in Next.js apps. But according to Tim Neutkens co-author of Next.js, in this thread he mentioned:

Next.js automatically adds the React import when JSX is used indeed. However keep in mind that we do still need to import React from 'react' when the React variable is used.

So this will show us, whenever we just want to use JSX feature alone from React we do not have to import React from 'react' and Next.js will implicitly import it for us, but in any other case we have to do that.