Form Submission Test

Navigation

This form controlls the static and results pages. These are the following options:
  • Static - This is a static page. And this content exists in the source code. (Our C2C pages)
  • Results - This is a client page. It is dynamically generated. And this content is not in the source code. (Our Results page)
  • Page exists - This checkbox determines if the page exists (our C2C pages). If the option is Static AND the Page Exists is checked, the page will be rendered with client fetch and the static content beneath the form will be rendered.

How the Hybrid Static/Client Page Works

This page demonstrates a hybrid rendering strategy in Next.js, where the content swaps between static server-rendered and client-only content based on the "Page exists" checkbox on the form.

  1. User Interaction: On the /form page, the user can tick the "Page exists" checkbox. If ticked and "Static" is selected, the app redirects to /form/static-page?pageExists=true. If not ticked, it redirects to /form/static-page.
  2. Server Component Logic: The static page checks the pageExists query parameter:
    • If pageExists is false or missing: Renders static heading, description, and server-fetched posts (all visible in the page source).
    • If pageExists is true: Renders only the static info bar and link, and swaps in the ResultsClient component for client-only results (not in the page source).
  3. Component Swap: The swap is controlled by the pageExists variable. When true, the static content is hidden and ResultsClient is rendered instead, with hideClientFooter to hide its own footer/button.
  4. Result: The same page can act as a classic static page or a client-only page, depending on user input. This is useful for demonstrating SSR, ISR, and client-only rendering in one place.
Summary Table:
CheckboxURLSSR ContentClient Content
Unticked/form/static-pageStatic heading, description, posts, info bar, link(same as SSR)
Ticked/form/static-page?pageExists=trueStatic info bar, linkResultsClient: heading, description, posts (client-only)

This hybrid approach is great for demonstrating both SEO-friendly static content and privacy-focused client-only rendering in a single Next.js app.