rightWayToParseMathInSSR.tsx

import { isValidElement, Children } from 'react';
import pkg from 'katex';

export function Math({ expression }: { expression: string }) {
	const equation = pkg.renderToString(expression, { throwOnError: false });
	return <span dangerouslySetInnerHTML={{ __html: equation }} />;
}

export function MathText({ children }: { children: React.ReactNode; }) {
	const parseMathExpressions = (text: string) => {
		const parts = [];
		let lastIndex = 0;

		const regex = /\$(.+?)\$/g;
		let match;

		while ((match = regex.exec(text)) !== null) {
			const mathExpression = match[1];

			if (match.index > lastIndex) parts.push(text.slice(lastIndex, match.index));
			parts.push(<Math key={match.index} expression={mathExpression} />);
			lastIndex = regex.lastIndex;
		}

		if (lastIndex < text.length) parts.push(text.slice(lastIndex));
		return parts;
	};

	const renderChildren = (children: React.ReactNode) => {
		return Children.map(children, (child) => {
			if (typeof child === 'string') return parseMathExpressions(child);
			else if (isValidElement(child)) return child;
			else return <></>;
		});
	};

	return <>{renderChildren(children)}</>;
}