facebook / facebook/lexical

Feature: Server-Side Rendering (SSR) Support for Lexical Editor

Open
#4,960 21 comments 64 reactions 0 assignees View on GitHub
contribution-week enhancement
Dominant language
TypeScript
Stars
23.9k
Forks
2.2k
Avg merge
1d 16h
Merged PRs (30d)
61

Description

### Use Case:

We are currently working on a project similar to Reddit, where our users utilize the Lexical Editor to create posts and comments. These posts are then displayed on their timelines using a read-only editor. This is a fundamental use case where we believe Server-Side Rendering (SSR) support is essential. SSR would greatly benefit us by allowing us to render these posts on the server, leading to improvements in user experience and SEO.

### Current Issue:
Our observation is that the Lexical Editor's rendering is currently limited exclusively to the client-side due to its reliance on client-side rendering mechanisms. Consequently, posts are only rendered on the client side, which can have some drawbacks.

### Challenges:
One of the challenges we've encountered is the time it takes for the editor to process data on the client side. This processing delay leads to noticeable UI jumps after content is loaded, which is not an ideal user experience.

### Proposed Solutions:
We propose exploring two potential solutions to address these challenges:

#### Server-Side Rendering with JSDOM:
We suggest investigating the feasibility of enabling SSR for the Lexical Editor by utilizing libraries like JSDOM. This approach would empower us to render the editor within a Node.js/server environment, thus improving initial load times and overall performance.

#### Render-Only Editor Mode:
Another avenue to explore is the creation of a "render-only" mode for the Lexical Editor. This mode would be optimized for server-side rendering, offering a simplified and resource-efficient way to render the lexical tree.

### How This Benefits the Project:
Implementing these solutions would not only enhance the user experience but also make our platform more SEO-friendly. It would address the limitations of client-side rendering, reduce processing time, and eliminate UI jumps, resulting in a smoother and more efficient application.

Contributor guide

Open the contributing guide

Research direction

The issue names no files, tests, or entry points. Begin by investigating the editor's client-side rendering path and comparing the proposed Node.js/JSDOM and render-only approaches; done requires an agreed SSR solution that improves server rendering, initial loading, SEO, and UI stability.

Written by the indexing model from the issue text.

Assessment

Tech stack
node.js, typescript
Domain
backend, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.