How to Install SeaText on a Server-Side Rendered Site
Install SeaText on a server-side rendered site by adding the SeaText JavaScript snippet to your base HTML template or layout file so it loads on every page render. Use the "General / Custom" platform...
Quick Answer
To install SeaText on a server-side rendered (SSR) site, copy the SeaText snippet from the General / Custom platform option in your SeaText dashboard and paste it into the shared layout or base template that wraps every server-rendered page. The snippet runs in the browser after the HTML arrives, so it works the same way whether the page was rendered on the server or the client.
This method works for any SSR framework—Next.js, Nuxt, Astro, Remix, SvelteKit, or a custom Node, Java, Go, or Python stack. You do not need a server-side SDK. The snippet is a small JavaScript block that loads the SeaText runtime from a CDN. Once deployed, SeaText activates within minutes and starts scanning your pages for translatable or personalizable content.
Why the General / Custom Option Is the Right Starting Point
SeaText's platform selector lists WordPress, Shopify, Webflow, and dozens of other CMSs, but it also includes a General / Custom choice for sites that don't match a pre-built integration. An SSR site built with Next.js, Nuxt, Astro, Remix, or a custom Node/Java/Go/Python stack falls into this category. Selecting General / Custom gives you the raw JavaScript snippet without any CMS-specific wrapper code.
This option is designed for developers who control their own HTML output. It gives you full flexibility to place the snippet exactly where you need it. It also avoids the overhead of a plugin or module that might not be maintained for your framework. The snippet is framework-agnostic; it only cares that the DOM is present when it executes.
If you use a static site generator (SSG) that outputs HTML files, the same snippet works. SeaText does not require a server to inject content. It runs entirely in the browser, so any page that includes the snippet will be processed. This includes pages generated by next export, astro build, or any other static export process.
Step-by-Step Installation
- Log in to SeaText and open the platform selector.
- Choose "General / Custom" from the list.
- Copy the provided snippet. It looks like a small
<script>block with your project ID. - Open your base layout file. In Next.js this is
app/layout.tsxorpages/_document.js; in Nuxt it'sapp.vueor a layout inlayouts/; in Astro it's a layout component insrc/layouts/. - Paste the snippet inside the
<head>or just before the closing</body>tag. - Deploy. The next build will include the snippet on every server-rendered page.
After deployment, open a page in your browser and check the Network tab. You should see a request to cdn.seatext.com or a similar domain. The SeaText dashboard will show the installation status as Active within a few minutes. If you do not see the request, verify that the snippet is present in the rendered HTML and that your Content Security Policy allows it.
Where the Snippet Runs in an SSR Flow
SSR sends fully formed HTML to the browser. The SeaText snippet executes after the browser parses that HTML, hydrates any client-side framework, and fires the DOMContentLoaded event. SeaText then scans the rendered DOM, identifies translatable or personalizable text nodes, and applies its AI agents. Because the snippet runs client-side, it does not interfere with server rendering, streaming, or static generation.
This client-side execution is a key advantage. It means SeaText works with any SSR architecture, including those that use streaming or partial hydration. The snippet does not block the initial render. It loads asynchronously and processes the page after the user can see it. This keeps your Time to Interactive (TTI) unaffected.
SeaText's AI agents can then rewrite headlines, CTAs, product descriptions, or entire sections based on the visitor's keyword, referral source, or language. For example, if a visitor arrives from a Google Ads campaign for "apartment for rent," the agent can adjust the page copy to match that intent. This happens in real time, without a page reload.
Common SSR Frameworks and Where to Place the Snippet
| Framework | Typical Layout File | Placement |
|---|---|---|
| Next.js (App Router) | app/layout.tsx | Inside <head> or before </body> |
| Next.js (Pages Router) | pages/_document.js | Inside <Head> or afterMain |
| Nuxt 3 | app.vue or layouts/default.vue | useHead() or <script> in template |
| Astro | src/layouts/BaseLayout.astro | Inside <head> or before </body> |
| Remix | app/root.tsx | In LinksFunction or MetaFunction |
| SvelteKit | src/app.html or +layout.svelte | %sveltekit.head% or <svelte:head> |
These are the most common locations, but the exact file depends on your project structure. The key is to place the snippet in a file that is shared across all pages. If you use a component-based layout, ensure the snippet is not inside a component that might be conditionally rendered or unmounted during navigation.
For custom SSR setups, find the template that wraps every response. This could be a Handlebars layout, a Pug template, or a simple string concatenation in your server code. The snippet must appear in the final HTML sent to the browser.
Verification Checklist
- Open a rendered page in the browser and inspect the Network tab; you should see a request to
cdn.seatext.comor similar. - Open the SeaText dashboard; the "Installation" status should switch to Active within a few minutes.
- Trigger a translation or personalization preview from the dashboard to confirm the agent sees your content.
- Check that the snippet is present in the HTML source of the page (View Source).
- Verify that the snippet loads on all routes, including dynamic routes and error pages.
If the status does not become Active, check for JavaScript errors in the browser console. Common issues include a missing closing tag, a typo in the project ID, or a Content Security Policy that blocks the script. Also confirm that the snippet is not inside a conditional that excludes the current page.
Key Facts
| Fact | Detail |
|---|---|
| Platform entry point | General / Custom in the SeaText platform selector (S1) |
| Snippet type | Client-side JavaScript, runs after HTML parse |
| Supported frameworks | Any SSR framework that allows a shared layout (Next.js, Nuxt, Astro, Remix, SvelteKit, custom) |
| No server-side code required | SeaText does not need a server SDK; the snippet is enough (S3, S7) |
| Activation time | Under 1 minute after deploy (S2) |
| Dashboard confirmation | Installation status turns "Active" once snippet loads (S8) |
Limitations and When This Advice Does Not Apply
- Edge middleware rewrites: If your SSR platform rewrites HTML at the edge (e.g., Cloudflare Workers, Vercel Edge Functions) before sending to the browser, ensure the snippet is injected after those rewrites or the snippet may be stripped.
- Strict CSP: A Content Security Policy that blocks inline scripts or unknown domains will prevent the snippet from loading. Add
script-src 'self' https://cdn.seatext.com(or the domain shown in your snippet) to your CSP. - Hydration mismatches: In React-based SSR, avoid placing the snippet inside a component that hydrates differently on client vs server; use the root layout instead.
- Non-HTML responses: API routes, RSS feeds, and JSON endpoints do not need the snippet.
- Single-page applications (SPAs): If your site is a pure SPA with no SSR, the same snippet works, but you may need to trigger SeaText manually after route changes if the framework does not reload the page. For SPAs, SeaText provides a separate integration guide (S8).
Performance and Security Considerations
The SeaText snippet is lightweight—around 14 KB gzipped—and loads asynchronously. It does not block rendering or hydration. However, you should still place it in the <head> with defer or before the closing </body> to avoid any potential render delay. The snippet uses a CDN, so it benefits from edge caching and low latency.
From a security perspective, the snippet only reads and modifies text content on your page. It does not collect sensitive data like passwords or payment information. It does send page content to SeaText's servers for processing, so ensure your privacy policy reflects that. If you have strict data residency requirements, check with SeaText about regional endpoints.
For sites with a Content Security Policy, you must allow the SeaText CDN domain. The exact domain is shown in your snippet. Typically it is https://cdn.seatext.com. Add it to your script-src directive. If you use nonce-based CSP, you may need to add a nonce to the snippet script tag.
Troubleshooting Common Issues
If SeaText does not activate, follow these steps:
- Check the browser console for errors. Look for blocked scripts or syntax errors.
- Verify the snippet is in the HTML by viewing the page source. It should appear exactly as copied.
- Confirm the project ID matches the one in your dashboard. A typo will cause a 404 from the CDN.
- Test on a clean page without other scripts that might interfere.
- Check your CSP if you have one. Temporarily disable it to see if that is the issue.
- Ensure the snippet is not inside a conditional that excludes the current route.
If the snippet loads but the dashboard still shows inactive, wait a few minutes. SeaText checks for the snippet periodically. If it remains inactive, contact support with your project ID and the URL of a test page.
Advanced Configuration and Best Practices
Once the snippet is installed, you can configure SeaText from the dashboard. You can choose which AI agents to activate, such as the Translation Agent, Google Ads Landing Page Agent, or Visitor Source Adaptation Agent. Each agent has its own settings. For example, the Translation Agent can translate your site into 125 languages (S5, S6). The Google Ads Agent rewrites landing pages based on the keyword a visitor searched (S3).
You can also control the scope of changes. SeaText allows you to exclude certain pages or sections. For instance, you might not want the AI to modify your pricing page or legal pages. Use the dashboard's configuration options to set rules.
For large websites, SeaText provides an implementation guide (S8). It recommends starting with a small set of pages or campaigns, then scaling up. This lets you measure the impact before rolling out across the entire site.
Best practices include:
- Place the snippet in the root layout to ensure it loads on every page.
- Use the
deferattribute if you place it in the<head>to avoid blocking. - Test on a staging environment before deploying to production.
- Monitor your site's performance after installation to ensure no negative impact.
- Keep the snippet updated by re-copying it from the dashboard if SeaText changes the CDN URL or adds new features.
FAQ
Do I need a separate SeaText account for each SSR site?
One SeaText account can manage multiple projects. Create a new project in the dashboard for each site and use its unique snippet.
Can I install the snippet via a tag manager instead of editing the layout?
Yes. Google Tag Manager, Segment, or any tag manager that injects into the <head> or <body> works, but the layout method is faster and avoids tag-manager load delays.
Will SeaText slow down my SSR page?
The snippet is ~14 KB gzipped and loads asynchronously. It does not block rendering or hydration.
What if my SSR site uses i18n routing (e.g., /en/, /fr/)?
SeaText detects the page language automatically. You can also force a language via the snippet config if needed.
Does SeaText work with static export (SSG) output?
Yes. The same snippet works on fully static HTML files generated by next export, astro build, etc.
How do I update the snippet if SeaText releases a new version?
The snippet loads the latest runtime from the CDN automatically. You only need to replace the snippet if your project ID changes.
Can I run SeaText only on certain routes?
Wrap the snippet in a conditional in your layout (e.g., {!pathname.startsWith('/admin') && <Script ... />}) to exclude admin or auth pages.
What if my SSR site uses edge rendering?
SeaText works with edge rendering as long as the snippet is included in the final HTML. If your edge function modifies the HTML, ensure it does not strip the snippet.
Does SeaText support server-side rendering of the changes?
No. SeaText applies changes client-side. This is intentional to avoid server load and to allow real-time personalization based on visitor context.
Can I use SeaText with a headless CMS?
Yes. As long as your frontend outputs HTML, the snippet works. The CMS does not matter.
Further reading and comparison sources
These external sources provide additional context for evaluating the topic. Their inclusion is not an endorsement.
Further reading and comparison sources
These external sources provide additional context for evaluating the topic. Their inclusion is not an endorsement.
Learn more
Visit the website for more information.