Functional components about react-ssr-prepass HOT 5 CLOSED

Aha okey thank you!

from react-ssr-prepass.

What does your visitor function look like?

from react-ssr-prepass.

import "fetch-register";
import { createElement } from "react";
import { renderToString } from "react-dom/server";

import Home from "./src/Home";
const ssrPrepass = require("react-ssr-prepass");

const renderApp = async (App) => {
  const element = createElement(App);
  await ssrPrepass(element, (element, instance) => {
    console.log("renderApp -> instance", instance);
    if (instance && instance.fetchData) {
      return instance.fetchData();
    }
  });

  return renderToString(element);
};

renderApp(Home);

from react-ssr-prepass.

@kitten I recreated the issue and you can see the full code here https://codesandbox.io/s/sweet-payne-xiik5?file=/server.tsx

from react-ssr-prepass.

Ah I see; so basically instance there is the literal instance of a class component, the result of what you'd get when calling new YourComponent. Hence it doesn't exist for function components and isn't passed for them.

So when you use function components, you'll have to use the first argument, element, directly. This still gives you access to the component's type (the function itself) and props, but obviously not to any other stateful properties or methods.

from react-ssr-prepass.