This repository has been archived by the owner on Apr 12, 2022. It is now read-only.
Utilize getInitialProps to pre-render pages #169
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Blog post idea: The parallels between client-side (cookie + csrf) vs server-side (cookie + auth header) rendering. One is for Authentication, one is for Authorization. |
evantahler
force-pushed
the
get-static-props
branch
from
3d8006d
to
be1c8fa
Compare
|
6cdde36 shows a good prototype of the pattern:
Page.getInitialProps = async (ctx) => {
const { execApi } = useApi(null, ctx?.req?.headers?.cookie);
const { apps, total } = await execApi("get", `/apps`, {});
return { apps, total };
};
const [apps, setApps] = useState<AppAPIData[]>(props.apps);
const [total, setTotal] = useState(props.total);
useSecondaryEffect(() => {
load();
}, [limit, offset]);In this way, we can use 90%+ of our existing component logic, pre-load data, and still keep the ability for the pages to dynamically react to use input and refresh data as needed. |
|
Now, there are only a few shared components. Shared components which need initial props export a import Head from "next/head";
import ProfilesList from "../components/profile/list";
export default function Page(props) {
return (
<>
<Head>
<title>Grouparoo: Profiles</title>
</Head>
<ProfilesList {...props} />
</>
);
}
Page.getInitialProps = async (ctx) => {
return ProfilesList.hydrate(ctx);
}; |
|
This PR also stops using webpack's ENV loader, in favor of Next's built in https://nextjs.org/docs/basic-features/environment-variables |
evantahler
force-pushed
the
get-static-props
branch
from
18b4e2d
to
55cd75d
Compare
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Rather than fetch data within lifecycle hooks (ie:
useEffect), we can utilize next'sgetInitialPropsmethod. This method runs both on the server and client to pre-fetch data needed to render the page. It will slow down initial rendering while data is fetched, but in exchange, the page will always be shown "with rendered data". This works on the client-side as well, blocking page transitions until data is fetched. This is likely what we want for Grouparoo's web UI.This update is not destructive. If it still makes sense to load the page data client-side, we can! Dashboard comes to mind...
So Far:
teamMemberand navigation information has been moved to an_app-level hook, soteamMember,navigationetc are always available in all pages._appand page-levelgetInitialPropsmethods.X-GROUPAROO-SERVER_TOKEN(see below)apiVersionaround, and load it from env* in the Client.Notes:
useApiandclientare modified to operate in 2 modes - fetching data from/as the client and then fetching data from the server on behalf of the clientgrouparooSessionId. The cookie information is passed from the browser to next, and then re-sent to the server in the case of SSRX-GROUPAROO-SERVER_TOKEN, which needs to match the value of the environment variableSERVER_TOKENon the server..envapiKeymethod authentication, which will not be used by the web frontendglobalThisis the new hotness in Typescript/JS to reference "window" or "global" in a server/client (both) friendly wayNext Steps:
getInitialPropsmethod. We'll need to move the majority of our logic from components to the pages.TODO After Merging this PR:
SERVER_TOKENenvironment variable