docs.foss.global/docs/push.rocks/corerender_readme.md

---
title: "@serve.zone/corerender"
---
# Corerender
A rendering service for serve.zone that preserves styles for web components.

## Install

To install Corerender in your project, you can use npm. Make sure you have Node.js installed and then run the following command in your terminal:

```shell
npm install corerender
```

This will add `corerender` as a dependency to your project, allowing you to use its rendering services to preserve styles for web components efficiently.

## Usage

Welcome to the comprehensive usage guide for `corerender`, a powerful rendering service designed to integrate seamlessly within your web applications, ensuring that styles for web components are preserved properly. The guide is structured to provide a thorough understanding of `corerender`'s capabilities, demonstrating its flexibility and efficiency through realistic scenarios. 

### Setting Up Your Environment

First things first, let’s get `corerender` up and running in your project. Ensure you've installed the package as detailed in the [Install](#install) section. Since `corerender` is a TypeScript-friendly library, it is recommended to use TypeScript for development to leverage the full power of type safety and IntelliSense.

### Basic Render Service Setup

```typescript
import { Rendertron } from 'corerender';

const rendertronInstance = new Rendertron();

(async () => {
  console.log('Starting rendertron...');
  await rendertronInstance.start();
  console.log('Rendertron started successfully!');
})();

```

The code initializes an instance of `Rendertron` and starts the service asynchronously. `Rendertron` is the core class responsible for managing the rendering processes, including task scheduling and storing rendering results persistently in a database.

### Understanding the Rendertron Architecture

The architecture of `Rendertron` is designed to support web component rendering through several integral components:

1. **Prerender Manager**: Manages the creation and retrieval of prerender results.
2. **Task Manager**: Handles scheduling tasks for prerendering operations and cleanup routines.
3. **Utility Service Server**: Provides the server interface that accepts/render requests and serves prerendered content efficiently.

### Using the Prerender Manager

The `PrerenderManager` is responsible for generating and caching the rendering results of webpages. Here’s how you can use the `PrerenderManager` to prerender a webpage:

```typescript
import { PrerenderManager } from 'corerender/dist_ts/rendertron.classes.prerendermanager';

(async () => {
  const prerenderManager = new PrerenderManager();
  await prerenderManager.start();

  const urlToPrerender = 'https://example.com';
  const prerenderResult = await prerenderManager.getPrerenderResultForUrl(urlToPrerender);
  console.log(`Prerendered content for ${urlToPrerender}:`);
  console.log(prerenderResult);

  await prerenderManager.stop();
})();
```

The above script demonstrates accessing a webpage's prerendered content. It initializes the `PrerenderManager`, specifies a URL, and requests the rendering result, which is stored or retrieved from the database.

### Scheduling Prerendering Tasks

The `TaskManager` class allows for efficiently scheduling tasks, such as regular prerendering of local domains and cleanup of outdated render results:

```typescript
import { TaskManager } from 'corerender/dist_ts/rendertron.taskmanager';

const taskManager = new TaskManager(rendertronInstance);
taskManager.start();

// Example: Manual trigger of a specific task
taskManager.triggerTaskByName('prerenderLocalDomains');

taskManager.stop();
```

`TaskManager` works closely with the `Rendertron` service to ensure tasks are executed as per defined schedules (e.g., every 30 minutes or daily). It allows manual triggering for immediate execution outside the schedule.

### Managing Render Results

The pre-rendered results are stored using `smartdata`’s `SmartDataDbDoc`. You may need advanced control over whether these are retrieved, created anew, or updated:

```typescript
import { PrerenderResult } from 'corerender/dist_ts/rendertron.classes.prerenderresult';

(async () => {
  const url = 'https://example.com';
  let prerenderResult = await PrerenderResult.getPrerenderResultForUrl(prerenderManager, url);

  // Check if an updated result is necessary
  if (prerenderResultNeedsUpdate(prerenderResult)) {
    prerenderResult = await PrerenderResult.createPrerenderResultForUrl(prerenderManager, url);
  }

  console.log(`Final Prerendered content for ${url}:`, prerenderResult.renderResultString);
})();
```

### Integrating with External Systems

`Corerender` can be integrated into broader systems that programmatically manage URLs and rendering frequencies. For instance, parsing and prerendering sitemaps:

```typescript
class IntegrationExample {
  private prerenderManager: PrerenderManager;

  constructor() {
    this.prerenderManager = new PrerenderManager();
  }

  async prerenderFromSitemap(sitemapUrl: string) {
    await this.prerenderManager.prerenderSitemap(sitemapUrl);
    console.log('Finished prerendering sitemap:', sitemapUrl);
  }
}

(async () => {
  const integrationExample = new IntegrationExample();
  await integrationExample.prerenderFromSitemap('https://example.com/sitemap.xml');
})();
```

### Server-Side Rendering Directly with SmartSSR

`Rendertron` uses the highly efficient `smartssr` for SSR requests. You can easily direct incoming server requests to utilize this rendering pipeline:

```typescript
import { typedserver } from 'corerender/dist_ts/rendertron.plugins';

const serviceServerInstance = new typedserver.utilityservers.UtilityServiceServer({
  serviceDomain: 'rendertron.example.com',
  serviceName: 'RendertronService',
  serviceVersion: '2.0.61', // Replace with dynamic version retrieval if needed
  addCustomRoutes: async (serverArg) => {
    serverArg.addRoute(
      '/render/*',
      new typedserver.servertools.Handler('GET', async (req, res) => {
        const requestedUrl = req.url.replace('/render/', '');
        const prerenderedContent = await prerenderManager.getPrerenderResultForUrl(requestedUrl);
        res.write(prerenderedContent);
        res.end();
      })
    );
  },
});

(async () => {
  await serviceServerInstance.start();
  console.log('SSR Server Started');
})();
```

### Customizing the Logger

`Rendertron` employs the `smartlog` package for logging activities across the service. To customize logging, instantiate a logger with custom configurations:

```typescript
import { smartlog } from 'corerender/dist_ts/rendertron.plugins';

const customLogger = smartlog.Smartlog.create({ /* custom options */ });
customLogger.log('info', 'Custom logger integrated successfully.');
```

### Closing Remarks

With these examples, you should have a robust understanding of how to implement `corerender` in your web application. It’s a powerful service that takes care of rendering optimizations, allowing developers to focus on building components and architecture, with clear workflows to handle tasks and results efficiently.

undefined